React学习计划-React16--React基础(四)生命周期和diffing算法,key的作用

1. 生命周期

1. 声命周期的三个阶段(旧)

React学习计划-React16--React基础(四)生命周期和diffing算法,key的作用_第1张图片

  1. 初始化阶段:由ReactDOM.render()触发—初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() ==> 常用
    一般在这个钩子中做一些初始化的事情,例如:开启定时器,订阅消息,发起网络请求
  1. 更新阶段:由组件内部this.setState()或父组件重新render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() ==> 必须使用的一个
4. componentDidUpdate()
  1. 卸载组件:由ReactDOM.unmountComponentAtNode()触发
    1. componentWillUnmount() ==> 常用
    一般在这个钩子中做一些收尾的事,例如:关闭定时器,取消订阅消息

2. 声命周期的三个阶段(新)

新旧生命周期对比:

去掉了三个生命周期

  1. componentWillMount
  2. componentWillReceiveProps
  3. componentWillUpdate
    新增两个生命周期
  4. getDerivedStateFromProps()
  5. getSnapshotBeforeUpdate()

React学习计划-React16--React基础(四)生命周期和diffing算法,key的作用_第2张图片

React学习计划-React16--React基础(四)生命周期和diffing算法,key的作用_第3张图片

  1. 初始化阶段:由ReactDOM.render()触发—初次渲染

    1. constructor()
    2. getDerivedStateFromProps()

    若state的值在任何时候都取决于props,那么可以使用

    1. render()
    2. componentDidMount() =====> 常用
      一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息
  2. 更新阶段:由组件内部this.setState()或父组件重新render触发

    1. getDerivedStateFromProps()
    2. shouldComponentUpdate()
    3. render() ==> 必须使用的一个
    4. getSnapshotBeforeUpdate()
    5. componentDidUpdate()
  3. 卸载组件:由ReactDOM.unmountComponentAtNode()触发
    1. componentWillUnmount() ==> 常用
    一般在这个钩子中做一些收尾的事,例如:关闭定时器,取消订阅消息

2. diffing算法

React学习计划-React16--React基础(四)生命周期和diffing算法,key的作用_第4张图片

  1. 虚拟DOM中key的作用:
    1. 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
    2. 详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】,随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下:
      1. 旧虚拟DOM中找到了与新虚拟DOM相同的key:
        (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
        (2).若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM
      2. 旧虚拟DOM中未找到与新虚拟DOM相同的key,根据数据创建新的真实DOM,随后渲染到到页面
  2. 用index作为key可能会引发的问题:
    1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:
      会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
    2. 如果结构中还包含输入类的DOM:
      会产生错误DOM更新 ==> 界面有问题。
    3. 注意!如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,
      仅用于渲染列表用于展示,使用index作为key是没有问题的。
  3. 开发中如何选择key?:
    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
    2.如果确定只是简单的展示数据,用index也是可以的。

示例:
React学习计划-React16--React基础(四)生命周期和diffing算法,key的作用_第5张图片

你可能感兴趣的:(react,#,react16学习路程,react.js,学习,前端)