ReactNative 第六节 实战之ReactJS 组件和生命周期

ReactNative关键是ReactJS思想在Native上的体现。

ReactJS核心思想：组件化。

每个组件维护自动的状态和UI，状态变化时，自动重新渲染。多个组件组成了ReactJS应用。

组件

看Sample文件 https://yunpan.cn/cSLnXwpc4u3tI （提取码：6760）

下面几个常用项：

React是全局对象，顶层API与组件API

React.createClass 创建组件的方法

ReactDOM.render 渲染，将制定组件渲染到指定DOM节点

render: function () 组件级API

组件生命周期（Sample文件）

创建

getDefaultProps：处理props的默认值 在React.createClass调用

// 1. create-------------------------------------------------------------------------

getDefaultProps: function () {// 在创建类的时候被调用。this.props该组件的默认属性
console.log("getDefaultProps");
return {};
},

实例化

React.render 启动之后开始实例化

getInitialState、componentWillMount、render、componentDidMount

state：组件的属性，主要是用来存储组件自身需要的数据，每次数据的更新都是通过修改state属性的值。

ReactJS内部会监听state属性的变化，有变化就会主动触发组件的render方法来更新虚拟DOM结构

虚拟DOM：将真实的DOM结构映射成一个JSON数据结构

// 2. 实例化------------------------------------------------------------------------

getInitialState: function () {// 初始化组件的state值，其返回值会赋值给组件的this.state属性。
// 获取this.state的默认值
console.log("getInitialState");
return {};
},

componentWillMount: function () {//在render之前调用此方法。业务逻辑的处理都应该放在这里，如对state的操作等
console.log("componentWillMount");
},

render: function () {
console.log("render");
return <h1> Hello {this.props.name}! </h1>;
},

componentDidMount: function () { //render方法之后调用.ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构
//组件内部可以通过this.getDOMNode()来获取当前组件的节点
console.log("componentDidMount");
},

更新

主要发生在用户操作之后或父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整

componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render(diff 算法）、componentDidUpdate

//3. 更新阶段-------------------------------------------------------------------------------------------
//主要发生在用户操作之后或父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整

componentWillReceiveProps: function () {//该方法发生在this.props被修改或父组件调用setProps()方法之后
//调用this.setState方法来完成对state的修改
console.log("componentWillRecieveProps");
},
shouldComponentUpdate: function () { //用来拦截新的props或state，根据逻辑来判断
//是否需要更新
console.log("shouldComponentUpdate");
return true;
},
componentWillUpdate: function () {//shouldComponentUpdate返回true的时候执行
//组件将更新
console.log("componentWillUpdate");
},
componentDidUpdate: function () {//组件更新完毕，我们常在这里做一些DOM操作
console.log("componentDidUpdate");
},

销毁

销毁时被调用，通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定

时器等工作

//4. 销毁阶段------------------------------------------------------------------------------------------
componentWillUnmount: function () { //销毁时被调用，通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作
console.log("componentWillUnmount");
},