React的基础入门

一、客户端引入React库

react在0.14版本时，将库拆封成了两个部分：react.js和react-dom.js。

• react.js中包含 React.createElement、 .createClass、 .Component， .PropTypes， .Children 这些 API，主要用来创建组件。
• react-dom.js中包含 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode，主要用来将节点渲染到节点，以及找到真实的DOM节点。

<script type="text/javascript" src="../js/react.min.js"></script>
<script type="text/javascript" src="../js/react-dom.min.js"></script>
<script type="text/javascript" src="../js/browser.min.js"></script>

其中browser主要用来转义jsx语法，还有将es6转义成es5。

---

二、jsx语法

简单来说就是将js与html进行了混合。

demo：

var style = {
    color: 'red',
    border: '1px #000 solid',
    lineHeight: '50px'
};
var HelloMessage = React.createClass({
    render: function() {
        return <div style={style}>Hello {this.props.name || 'React'}</div>;
    }
});

ReactDOM.render(<HelloMessage name="World" />,document.body);

---

三、React组件的生命周期

1、初始化阶段

var HelloWorld = React.createClass({
    getDefaultProps: function(){//只调用一次，实例之间共享引用
        console.log('getDefaultProps,1');
        return {name: 'Tom'};
    },
    getInitialState: function(){//初始化每个实例特有的状态
        console.log('getInitialState,2');
        return {myCount: count++, ready: false};
    },
    componentWillMount: function(){//render之前最后一次修改状态
        console.log('componentWillMount,3');
        this.setState({ready: true});
    },
    render: function() {//只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
        console.log('render,4');
        return <p>Hello {this.props.name || 'World'} <br /> {''+this.state.ready} <br /> {'  '+this.state.myCount+'  '}</p>
    },
    componentDidMount:function(){//成功render并渲染完成真实DOM之后触发，可以修改真实的DOM
        console.log('componentDidMount,5');
        $(ReactDOM.findDOMNode(this)).append('surprise!');
    }
});

2、运行中阶段

var HelloWorld = React.createClass({
    componentWillReceiveProps: function(newProps) {
        console.log('componentWillReceiveProps, 1');
        console.log(newProps);
    },
    shouldComponentUpdate: function() {
        console.log('shouldComponentUpdate, 2');
        return true;
    },
    componentWillUpdate: function(){
        console.log('componentWillUpdate, 3');
    },
    render: function() {//只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
        console.log('render,4');
        return <p>Hello {this.props.name || 'World'} <br/></p>
    },
    componentDidUpdate:function(){//组件更新完后调用
        console.log('componentDidUpdate, 5');
        $(ReactDOM.findDOMNode(this)).append('surprise!');
    }
});

3、销毁阶段

var HelloWorld = React.createClass({
    render: function() {//只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
        console.log('render,4');
        return <p>Hello {this.props.name || 'World'} <br/></p>
    },
    componentWillUnmount:function(){
        console.log('BOOOOOOOOOOOOOOM!');
    }
});

---

四、组件的属性与状态

属性： this.props，

一个事物的性质与关系。
属性是不可以由自己修改的，是父组件调用该组件或者创建实例时传递进来的。

给一个组件传递属性的三种方法：

1、通过键值对的方式

<New name={'Jack'}></New>

大括号中是一段js执行代码，可以使数字、字符串基本数据，也可以是三元表达式或者异或运算。

2、通过react语法糖（…）展开一个对象

var  properties = {name: 'Jack', age: 18};
<New {...properties}></New>

…的运算符号能将一个对象进行展开，相当于拿到了properties对象中的两个属性赋给该组件。

3、使用setProps方法，该方法不建议使用，不能再组件内部修改属性，这违背了组件设计的原则

var instacne = ReactDOM.render(<New />,document.body);
instance.setProps({name: 'Jack'});

在最新的React版本15中，setProps已经被弃用。

状态：this.state,

事物所处的状况。状态是由事物自行处理的，不断变化的，是一个事物的私有属性。

与状态有关的方法：
- getInitialState： 初始化每个实例特有的状态。
- setState：更新组件的状态。使用setState会调用diff算法。

属性与状态异同：

相似点：
- 都是JS纯对象
- 都会触发render更新
- 都具有确定性

不同点：

–	属性	状态
是否从父组件获取初始值	✔	✘
是否由父组件修改	✔	✘
是否在组件内部设置默认值	✔	✔
是否在组件内部修改	✘	✔
是否设置子组件的初始值	✔	✘
是否修改子组件的值	✔	✘

状态和属性都会触发render更新，都是纯JS对象。
- 状态：组件状态只和自己相关，既不受父组件也不受子组件影响
- 属性：组件不能修改属性，只能从父组件获取属性，父组件也能修改它的属性

根本的区别：组件在运行时需要修改的数据就是状态。