react生命周期

react组件生命周期无外乎存在两种情况： 1. 初次挂载组件 2. 已挂载待更新组件 初次挂载组件： constructor(props, context) 创建时调用一次 componentWillMount() 组件挂载前调用一次。如果此时setState，本次的render函数可以看到更新后的state，并且只渲染一次 componentDidMount() 在组件挂载（render）之后调用一次。此时可以使用refs获取dom componentWillUnmount() 在组件被卸载的时候调用。一般componentDidMount里面注册的事件需要在这里删除。 已挂载待更新组件： componentWillReceiveProps() props是父组件传递给子组件的。只要父组件render的时候组件会调用componentWillReceiveProps shouldComponentUpdate() 组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染。 默认返回true，需要重新render。此处可做重要的优化。减少不必要的更新比对。 componentWillUpdate() 在上一个钩子函数shouldComponentUpdate返回true或者调用forceUpdate之后

1~ 初始化 constructor 将要挂载 componentWillMount 渲染 render 挂载 componentDidMount 是否要更新 shouldComponentUpdate 当数据发生改变 触发生命周期函数 这个时候分两种状态 是否存在 shouldComponentUpdate 这个函数 第一个 不存在 数据正常更新 触发 三个函数: 将要更新 componentWillUpdate 渲染 render 更新 componentDidUpdate 第二个 存在 数据被拦截 按照你自己的需求去返回true 或者false，这个函数存在必须要返回相关的布尔值, 否则报错 这个函数方法有两个参数 第一个 newProps 第二个是 newState ① 如果是 true 的时候 生命周期的顺序是 shouldComponentUpdate是否要更新-》componentWillUpdate将要更新=》 render渲染-》componentDidUpdate更新 ② 如果是 false 就结束了 只走了shouldComponentUpdate-----是否要更新 将要更新 componentWillUpdate 更新 componentDidUpdate 在React中 从挂载开始 react 页面一进入会触发 初始化 constructor-》将要挂载

前言 学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1、getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默认属性. 2、getInitialState() 在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props 3、componentWillMount() 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。 4、 render() react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。 5、componentDidMount() 组件渲染之后调用，只调用一次。 更新 6、componentWillReceiveProps(nextProps) 组件初始化时不调用，组件接受新的props时调用。 7、shouldComponentUpdate(nextProps, nextState) react性能优化非常重要的一环。组件接受新的state或者props时调用

组件的生命周期 概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为 组件的生命周期； 组件生命周期分为三部分： 组件创建阶段 ：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次； componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOM render：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了 componentDidMount: 组件完成了挂载，此时，组件已经显示到了页面上，当这个方法执行完，组件就进入都了 运行中 的状态 组件运行阶段 ：也有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次； componentWillReceiveProps: 组件将要接收新属性，此时，只要这个方法被触发，就证明父组件为当前子组件传递了新的属性值； shouldComponentUpdate: 组件是否需要被更新，此时，组件尚未被更新，但是，state 和 props 肯定是最新的 componentWillUpdate: 组件将要被更新，此时，尚未开始更新，内存中的虚拟DOM树还是旧的 render: 此时，又要重新根据最新的 state 和 props

React生命周期： 在react中，生命周期函数指的是组件在某一时刻会自动执行的函数。 constructor虽然也会自动执行，但不是react所独有的，可以理解成普通的类的生命周期函数 render当数据发生变化时，render函数会被自动执行，他就是一个react生命周期函数 Initialization: 组件初始化的过程，设置属性和数据，没有用到任何生命周期函数 Mounting: 依次执行接下来的三个函数 componentWillMount （挂载前自动执行） render （渲染时自动执行；组件更新之前 componentWillUpdate后 自动执行） componentDidMount （挂载后自动执行） 页面挂载的阶段，也就是说你有了数据之后，需要把数据对应的页面展示到html上面 数据发生变化时，页面也会跟着变 数据发生变化了，不会重新执行Mounting这个过程。React中，只有当你的组件 第一次渲染 到页面的时候，才会执行Mounting这个过程 Updation 当数据发生了变化，react会执行updation更新过程，即props和state更新生命周期 componentWillReceiveProps （props独有的props变化时执行。子组件接收父组件参数，父组件render重新执行那么子组件中的这个生命周期就会执行！）

React组件的生命周期中有四个阶段 初始化阶段 （初始阶段） Mounting (挂载阶段) Updation （更新阶段） Unmounting（销毁阶段） 初始化阶段 运行constructor()中的代码，完成对数据，state，props初始化 一，Mounting (挂载阶段) componentWillMount() //组件即将被挂载到页面之前执行 render() //渲染函数，组件挂载时执行 componentDidMount() //组件即将被挂载到页面之后执行 二，Updation （数据更新阶段 state，props改变时执行） shouldComponentUpdate() //组件数据更新前执行 必须返回一个 布尔类型值 用于判断是否进行下一步操作 //常用于性能优化，因为在react中 父组件调用render函数，会触发子组件也调用render函数，在数据没有改变的情况下 导致不必要的性能损失 shouldComponentUpdate(nextProps,nextState){ if(nextProps.content !== this.props.content){ return true; }else{ return false } } componentWillUpdate() //组件更新数据之前执行 reder() /

我们将React.js将组件渲染，并且构造DOM元素然后塞入页面的过程称为组件的挂载。即：初始化组件->挂载到页面上的过程。 constructor() //所有关于组件自身的状态的初始化工作都会放在constructor里面去做，如state。 ->componentWillMount() //组件挂载开始之前，也就是在组件调用render方法之前调用。它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。 render() ->componentDidMount() //构造DOM元素插入页面。组件挂载完成以后，也就是DOM元素已经插入页面后调用。 运行中： //属性props改变： componentWillReceiveProps() 接受一个参数nextProps 通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件 //状态state改变： shouldComponentUpdate(nextProps,nextState) 主要用于性能优化(部分更新) 唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新

组件的生命周期 1.什么是生命周期？ React的生命周期其实就是组件的生命周期，是指组件从创建到销毁的一整个过程。 分为三个阶段： 1.初始化期 2.存在期 3.销毁期 2.生命周期函数 在生命周期中每个阶段都有一些固定的函数，就叫生命周期函数，系统会在适当的时期自动执行，只需设置即可。 3.生命周期 初始化之前：整个组件被引入时执行 getDefaultProps:设置默认属性值 实例化期（初始化期）：组件类被实例化到完全渲染出来。 getInitialState 设置组件的默认状态值 componentWillMount 组件渲染前 render 组件渲染中，不能省略，必须手动实现 componentDidMount 组件渲染后，通常编写AJAX获取远程数据。 存在期：组件渲染出来可以被用户浏览和操作 componentWillReceiveProps 即将改变属性值 shouldComponentUpdate 是否要重新渲染，返回值为ture or false componentWillUpdate 组件更新前 componentDidUpdate 组件更新后 销毁期：组件生命周期的最后一个，组件被其他组件所替换，不再显示，就叫组件销毁 componentWillUnmount 组件即将销毁的函数，可以做一些数据回收，内存释放的事 来源： CSDN 作者： 岸芷汀兰§小慧

组件载入阶段： componentWillMount: 组件即将被装载、渲染到页面上，只调用1次 componentDidMount: 组件真正在被装载之后，这里可以拿到真实DOM执行操作，只调用1次 运行中状态： componentWillReceiveProps(nextProps): 组件将要接收到新属性的时候调用，在这时setState不会触发额外的render,因为此时已经有一次来自父组件引发的render了。 shouldComponentUpdate: 组件接受到新属性或者新状态的时候（返回 false，接收数据后不更新，阻止 render ，后面的函数不会继续执行） componentWillUpdate: 组件即将更新不能修改属性和状态 componentDidUpdate: 组件已经更新 销毁阶段： componentWillUnmount: 组件即将销毁，这时候可以销毁绑定的 事件监听 或者 定时器 什么的。 React中的props和state的用法 state 是一种 数据结构 ，用于组件挂载时所需数据的默认值。state 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。 Props则是 组件的配置 。props 由父组件传递给子组件，并且就子组件而言，props 是 不可变的(immutable) 。 react组件之间如何通信 父子

创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { render (){ return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text> } } 第二种:通过ES5的方式创建 /** * 方式二:ES5 */ var HelloComponent= React.createClass( { render (){ return <Text style={{fontSize:50,backgroundColor:'red',marginTop:200}}>Hello:{this.props.name}</Text> } } ); module.exports = HelloComponent; 第三种:函数式定义 /** * 方式三:函数定义 * 无状态,不能使用this */ function HelloComponent(props){ return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text> } module.exports = HelloComponent; 组件的生命周期