zoukankan      html  css  js  c++  java
  • react新的生命周期

    一. react16当前生命周期

    • componentWillMount
      render前,所以setState不会重新渲染,服务端渲染唯一调用,推荐用constructor代替之
    • render
    • componentDidMount
      render后,调用setState会重新渲染,页面可交互,可以请求数据
    • componentWillRecieveProps(nextProps)
      已挂载组件接收到新props触发
    • shouldComponentUpdate(nextProps, nextState)
      在接收到新的props或state时是否重新渲染,默认返回true;首次渲染或forceUpdate时不会触发;
    • componentWillUpdate(nextProps, nextState)
      如果shouldComponentUpdate返回false,update相关的函数都不会触发;不要使用setState;
    • componentDidUpdate(nextProps, nextState)
    • componentWillUnmount
      卸载组件

    二. 由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数

    • componentWillMount
    • componentWillRecieveProps
    • componentWIllUpdate

    三. 新增两个

    • static getDerivedStateFromProps
      会在初始化和update时触发,用于替换componentWillReceiveProps,可以用来控制 props 更新 state 的过程;它返回一个对象表示新的 state;如果不需要更新,返回 null 即可
    • getSnapshotBeforeUpdate
      用于替换 componentWillUpdate,该函数会在update后 DOM 更新前被调用,用于读取最新的 DOM 数据,返回值将作为 componentDidUpdate 的第三个参数

    四. 建议用法

    class A extends React.Component {
      // 用于初始化 state
      constructor() {}
      // 用于替换 `componentWillReceiveProps` ,该函数会在初始化和 `update` 时被调用
      // 因为该函数是静态函数,所以取不到 `this`
      // 如果需要对比 `prevProps` 需要单独在 `state` 中维护
      static getDerivedStateFromProps(nextProps, prevState) {}
      // 判断是否需要更新组件,多用于组件性能优化
      shouldComponentUpdate(nextProps, nextState) {}
      // 组件挂载后调用
      // 可以在该函数中进行请求或者订阅
      componentDidMount() {}
      // 用于获得最新的 DOM 数据
      getSnapshotBeforeUpdate() {}
      // 组件即将销毁
      // 可以在此处移除订阅,定时器等等
      componentWillUnmount() {}
      // 组件销毁后调用
      componentDidUnMount() {}
      // 组件更新后调用
      componentDidUpdate() {}
      // 渲染组件函数
      render() {}
      // 以下函数不建议使用
      UNSAFE_componentWillMount() {}
      UNSAFE_componentWillUpdate(nextProps, nextState) {}
      UNSAFE_componentWillReceiveProps(nextProps) {}
    }
  • 相关阅读:
    小总结下iphone开发环境搭建过程!
    Raspberry Pi之旅 【序】
    linux虚拟机中配置samba的实现文件共享的方法
    编写高质量的代码1尽量使用StringBuilder
    ArcEngine开发点滴1
    开源Firebird .NET Provider V0.9.0.0发布
    .NET的Ant构建系统 NAnt 0.91发布!
    iis7.5 发布rest服务,put请求返回404错误 解决方法
    COM学习笔记(1)
    2004年南京美食地图 [转载]
  • 原文地址:https://www.cnblogs.com/colima/p/9484607.html
Copyright © 2011-2022 走看看