React16.3.0以后的生命周期(一) - 组件加载

组件加载

当组件被实例化并且插入Dom时所执行的方法,也会按照下的顺序依次执行。

  • constructor()

    构造方法。

    这个方法有两个目的:

    • 初始化一个本地state

      this.state = {color: 'red'};
      要避免将props参数直接赋值给state, this.state = {color: props.color}是不允许 的
    • 绑定方法。

      我们知道React Class中是不会继承this的,如果在class的方法中使用this,那么我们需要将this绑定到方法中。

      this.clickHandler = this.clickHandler.bind(this);
      绑定this,将需要super(props),否则会提示找不到this.

      示例:

      constructor(props) {
        super(props);
        this.state = {color: 'red'};
        this.clickHandler = this.clickHandler.bind(this);
      }
  • static getDerivedStateFromProps()

    当本地state需要根据props来改变的时候可调用此方法。

    这个方法是在render()前会被执行,只要执行render()都会被在之前被触发。

    该方法有两个参数propsstate; 返回值为state对象, 不需要返回整体state,把需要改变的state返回即可。

    示例:

    static getDerivedStateFromProps(props, state) {
      if(props.color !== state.color) {
        return {color: props.color};
      }
    }
  • render()

    这个方法是React组件中必须要提供的方法。当state或者props任一数据有更新时都会执行。

    需要注意当继承PureComponent时,不会对对象进行深度比较,也就是,不会根据对象内的对象变化时执行render().

    render()是一个纯函数,也就是不能在这个方法中有类似setState()这样的行为。

    返回的数据类型可以有:

    • nullStringNumberArrayBoolean
    • React elements
    • Fragment
    • Portal
    注意:不能返回undefined.

shouldComponentUpdate()返回false时,无论stateprops有没有变化,这个方法都不执行。

示例:

render() {
  return (
    <div>{this.state.color}</div>
  );
}
  • componentDidMount()

    componentDidMount()方法是在组件加载完后立即执行,也就是当该组件相关的dom节点插入到dom树中时。该方法在组件生命中只执行一次。

    一般情况,我们会在这里setState()根据props的值,也可以从这里调用接口,获取服务端的数据,也可以在这里监听websocket、setInterval等操作。

    注意:一些监听需要在组件卸载时清理掉,否则会引起异常。

    示例:

    componentDidMount() {
      this.setState({color: this.props.color});
    }

    在线示例

推荐阅读《React 手稿》


React 手稿
记录个人在工作和学习中积累的React知识点。

React 第一本手稿级的文档。

5.9k 声望
9.9k 粉丝
0 条评论
推荐阅读
React 按需加载 - 代码分隔
我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起,并且由一个类似index.js的入口文件串联起来的单页面web页面。

小翼27阅读 8.3k评论 1

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.4k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs40阅读 6.4k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.5k评论 6

React 第一本手稿级的文档。

5.9k 声望
9.9k 粉丝
宣传栏