React入门

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React入门相关的知识,希望对你有一定的参考价值。

第一节:如何开始react和了解react的概念

1.React是什么

  react是Facebook 开发出来用于促进UI交互,创建带有状态的,可复用的UI组建的UI库!Feacebook的产品广泛运用这技术,Instagram.com(一款图片分享应用)基于react开发出来的。(这里的理解难点在于 带有状态的,可复用的UI组件。也就是一个UI组件,它带有状态属性,并且可重复使用!)

  react的最大的卖点就是,react不仅可以在浏览器端使用,还可以在服务端使用,还可以两端一起使用!

  react的底层的概念:react运用的是Virtual DOM(虚拟DOM),然后根据UI组件的状态变化,有选择的渲染DOM的节点树!它尽可能的操作最少的DOM来更新UI组件。

2.虚拟DOM是如何工作的?

  想象下,你建立一个关于人的对象。这对象拥有人的每一个属性,然后这对象就像镜子一样,映射出一些人中每一个人的所有属性。这就是React与DOM的主要关系。

  (我是这么理解的,React的虚拟DOM尽可能的拥有DOM的一切属性,然后在应用中使用虚拟DOM映射出当前应用需要的所有DOM节点!)

  现在,如果我们给这个对象,添加一个胡子、一些肱二头肌、Steve Buscemi 的眼睛(给人对象的某个实例添加这些)。在react中,当我们需要这些变化产生,(react)会发生两件事。第一件事,就是react会运行"差异"算法,也就是前跟后发生了哪些变化。第二件事,就是把这种"差异"算法的出的结果更新到DOM上(应该是虚拟DOM)

  React的这种运行模式不同于依照变化前的人,然后开始重新把这些变化后的人塑造出来(我是这里理解的,原本的DOM要变化一个节点,需要新建一个节点再把变化加上去,然后再去替换之前的节点。而react的方式,就是在它自己的虚拟DOM上直接把需要变化的地方,变化下OK了)。它只需要换下脸和手臂。这就意味着,如果你想要在input输入框中把一些文本渲染出来,只要输入框的父节点没有安排改变,它将会保持原状!(只修改要变化的,不要变化的保持原状!)

3.开始React的准备

  第一步,下载开发包。下载地址:http://facebook.github.io/react/downloads/react-0.11.2.zip

      你也可以用bower安装新版的react。

1
bower install react

 

  第二步,在页面中引入react库。

    在页面中引入react库,分别引入react.js和JSXTransformer.js这两个文件。然后在自己的type为text/jsx的srcipt标签中写应用组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="bower_components/react/JSXTransformer.js"></script>
    <script src="bower_components/react/react.js"></script>
</head>
<body>
    <div id="mount-point"></div>
    <script type="text/jsx">
        //这里的type是text/jsx
        //这里你的代码
    </script>
</body>
</html>

    在react中,组件都是绑定到一个元素中,上面的例子就是用id 为mount-point的div作为组件的容器。

    这种事开始react的最简单的方法。但在实际应用中,使用Browserify或者webpack把组件代码放到单独文件中的方法更好。

4.React的基础

  现在我开始一个简单的展示:

1
2
3
4
5
6
<script type="text/jsx">
    React.render(
    <h1>Hellow, World!</h1>,
    document.getElementById(‘mount-point‘)
    )
</script>

  用浏览器打开html页面,效果就是:

  技术分享图片

5.JSX

   这种写法叫JSX。这是一种javascript XML语法的转换(javascript 中的XML语法)。这可以让你在javascript中编写html标签。其实你编写的是基于对象展现的XML。

    对于常规的html标签,在JSX中class属性是className,for属性是htmlFor。应为class、for等都是javascript的保留字。更多的不同你可以看这里    (http://facebook.github.io/react/docs/jsx-gotchas.html)

    如果你不用JSX语法编写,用存粹的javascript的语法你可以这么写。

1
2
3
4
5
6
<script type="text/javascript">
    React.render(
    React.DOM.h1(null‘Hello, World!‘),
    document.getElementById(‘mount-point‘)
    )
</script>

  在网页中也能显示出Hello, World!

6.组件

   当时调用render的方法时,它的第一个参数就是就要选人的组件。第二个参数就是你想定绑定的DOM节点。

    我们可以使用createClass方法创建一个自定义的组件。它接受一个对象格式的参数。例子如下:

var MyComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});

    创建了一个组件之后,可以把MyComponent渲染到我们的DOM中:

1
2
3
4
React.render(
    <MyComponent/>,
    document.getElementById(‘mount-point‘)
)

7.Props

    当我们使用定义的组件时,我们可以给它添加props属性。这属性非常有作用,在我们的组件中作为this.props。当我们想要渲染动态数据就使用它。

    列子如下:

1
2
3
4
5
6
7
8
9
10
11
var MyComponent = React.createClass({
    render: function () {
        return (
            <h1>Hello, {this.props.name}!</h1>
        );
    }
});
React.render(
    <MyComponent name="Ailen"/>,
    document.getElementById(‘mount-point‘)
)

    显示结果就是:

技术分享图片

8.规范,生命周期和状态

  创建一个组件, render 方法是唯一需要的规范。但我们的组件想要完成其他一些事情时,这里有几个生命周期方法和规范供组件有效的完成这些事情。

  生命周期方法:

    1.componentWillMount(组件将要安装绑定):在客户端和服务端 组件被渲染之前,componentWillMount执行一次。

    2.componentDidMount (绑定安装过的组件): 组件渲染完成后仅在客户端compoentDidMount调用一次。

    3.shouldComponentUpdate(应该更新的组件):返回值决定组件是否要更新。

    4.componentWillUnmount(将要取消安装绑定的组件):优先调用要取消安装绑定的组件。

    (这里我也是一知半解)

  Specs(规格,规范)

    1.getInitialState: 为状态返回一个初始化值。

    2.getDefaultProps:如果为提供props,设置回退的props值。

    3.mixins: 通过一个关于对象的数组来扩展组件的功能性。

  关于更多的specs 和 lifecycle方法可以点击链接:http://facebook.github.io/react/docs/component-specs.html

  State(状态)

    每个组件都有一个state对象和一个props对象。state使用setState方法,调用setState来触发视图更新和React的交互性。如果我们想在交互发生之前设置一个默认的状态,可以使用getInitialState方法。下面举例演示组件的状态:

1
2
3
4
5
6
7
8
9
10
11
12
13
var MyComponent = React.createClass({
    getInitialState: function () {
        return {
            count: 5
        }
    },
    render: function () {
        return (
            <h1>{this.state.count}</h1>
        )
    }
});
React.render(<MyComponent/>, document.getElementById(‘mount-point‘));

9.Event(事件)

    react也提供一套能够兼容各浏览器的事件系统。这些事件作为属性添加组件上可以触发方法。

      下面我们通过事件来实现count自增。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var MyComponent = React.createClass({
    incrementCount: function () {
        //修改state 通过setState方法
        this.setState({
            count: this.state.count + 1
        })
    },
    //getInitialState 初始化state的值
    getInitialState: function () {
        return {
            count: 5
        }
    },
    render: function () {
        return (<br>               //友情提醒、react的组件必须用一个一个容器包裹下。也就是这里的div。如果只有一个标签例如:<h1>hello, world!</h1>就不需要div包裹了。
            <div>
                <h1>{this.state.count}</h1>
                <button type="button" onClick={this.incrementCount} >Increment</button>
            </div>
        )
    }
});
React.render(<MyComponent/>, document.getElementById(‘mount-point‘));

  感觉很酷哦!

10.Unidirectional Data Flow(单向数据流)

    react中,应用的数据传递是单向的通过state和props对象,不同于angular的双向数据绑定。单向数据流的意思就是,在一个多组件构成的应用中,每一个父组件负责管理state并且通过props传递给下一层组件。

     状态(state)通过setState方法来更新,来确保UI更新发生。如果有必要state的最终结果值应该被当作 子组件的属性 传递给子组件,在子组件中通过this.props来获取值。

     下面来举

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var FilteredList = React.createClass({
    //自定义的过滤方法
    filteredList: function (event) {
        var updateList = this.state.initialItems;
        //根据输入框的值来过滤出结果
        updateList = updateList.filter(function (item) {
            return item.toLowerCase().search(event.target.value.toLowerCase()) !== -1;
        });
        //将过滤出的值通过setState方法来更新state
        this.setState({items: updateList});
    },
 
    //state 初始化方法
    getInitialState: function () {
        return {
            initialItems: ["Apples""Broccoli""Chicken""Duck""Eggs""Fish""Granola","Hash Browns"],
            items: []
        }
    },
    //在组件渲染之前执行该方法
    componentWillMount: function () {
        this.setState({items: this.state.initialItems});
    },
    render: function () {
        //onChange 事件来执行filteredList方法
        //再将更新过的state 作为List组件的属性传递给List组件
        return (
            <div class="filter-class">
                <input type="text" placeholder="Search" onChange={this.filteredList} />  
                <List items={this.state.items} />
            </div>
        )
    }
})
 
var List = React.createClass({
    render: function () {
        //List组件中通过this.props来获取到FilteredList传递进来的值
        return (
            <ul>
                {
                    this.props.items.map(function (item) {
                        return <li key={item}>{item}</li>
                    })
                }
            </ul>
        )
    }
});
 
React.render(<FilteredList/>, document.getElementById("mount-point"));

  运行结果:技术分享图片技术分享图片

   感觉还是不错的哦 

11.总结

    以上的都是一些关于react的基础。有时间,有问题就去查看React API:"http://facebook.github.io/react/docs/top-level-api.html"

    最好也去了解下关于jsx:http://facebook.github.io/react/docs/jsx-in-depth.html

以上是关于React入门的主要内容,如果未能解决你的问题,请参考以下文章

前端开发工具vscode如何快速生成代码片段

前端开发工具vscode如何快速生成代码片段

[React Testing] Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability(代码片段

react简介

react简介

导致资产预编译在heroku部署上失败的代码片段