?一名 vueCoder 总结的 React 基础

背景

1、react 系列

先介绍下背景，实习开始到2021.3月一直在写vue。换了新窝后，主要用 react，当然 vue 也还用，偏 H5 端。

从入门开始，react 系列的，会边学边写，从基础 -> hooks -> 源码 -> 面试题等等，也会写一些自己转变的过程。

相关代码都会在下面 ?? 仓库，求个 start。

• 仓库： React-TypeScript
• 线上预览：俊劫 React 学习系统

2、个人博客

首发个人博客 , 个人学习的所有笔记，以及各种前端资源分享，有兴趣的老哥可以看看，顺手start 一下下。
如果你也想搭建一个类似的博客，博客里面也都有教程，从头到尾全免费。博客中有公众号，欢迎各位一起，每天学习打卡，共同进步！

一、生命周期

React 生命周期图解

我已经把这张图印在脑子里面了，没事就自己画画，中间发散一些自己的思考。u1s1，不知道 react 的生命周期命名为什么要怎么长~~~，
小程序，vue 的都比较短。毕竟使用的频率还是很高的，Hooks 除外。

1、constructor

constructor 是类通用的构造函数，常用于初始化，算是生命周期的一环。React 后来的版本中类组件也可以不写。

注意：在构造函数中使用时，super 关键字将单独出现，并且必须在使用 this 关键字之前使用。super 关键字也可以用来调用父对象上的函数。MDN 说明

class JJTest extends React.Component {
  // constructor 写法
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }
  // 直接声明
  state = {
    count: 0,
  };
}
复制代码

2、getDerivedStateFromProps

触发时机：state 变化、props 变化、forceUpdate，如上图。

这是一个静态方法, 是一个和组件自身”不相关”的角色. 在这个静态方法中, 除了两个默认的位置参数 nextProps 和 currentState 以外, 你无法访问任何组件上的数据。

// 初始化/更新时调用
static getDerivedStateFromProps(nextProps, currentState) {
  console.log(nextProps, currentState, "getDerivedStateFromProps方法执行");
  // 返回值是对currentState进行修改
  return {
    fatherText: nextProps.text,
  };
}
复制代码

3、render

render 函数返回的 JSX 结构，用于描述具体的渲染内容，
render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

• React 元素。通常通过 JSX 创建。例如，
  会被 React 渲染为 DOM 节点， 会被 React 渲染为自定义组件，无论是

  还是 均为 React 元素。

  © 版权声明

  文章版权归作者所有，未经允许请勿转载。

  THE END

  前端
  
  喜欢就支持一下吧
  点赞0 分享

  QQ空间微博QQ好友海报分享复制链接