小白菜笔记--React（二）Class 组件

两种方式创建 Class 组件

1. ES5 方式（已过时）

   import React from 'react'
   const A = React.createClass({
       render() {
           return (
               <div>hi</div>
           )
       }
   })
   export default A

2. ES6 方式

   import React from 'react'
   class B extends React.Component {
       constructor(props) {
           super(props)
       }
       render() {
           return (
               <div>hi</div>
           )
       }
   }
   export default B

   强行记忆点：extends 、constructor、super。
   如果写了 constructor 没写 super 会报错，所以要么不写 constructor （即不初始化），要么就写全。super 的作用：将父类的this对象继承给子类。

Props 外部数据

作用：接受外部数据或函数
读取：this.props
与之相关的钩子：UNSAFE_componentWillReceiveProps(newProps)
注意事项：永远不要改写 Props，应该由 Props 的主人对数据进行更改

State 和 setState

class App extends React.Component {
  constructor(props) {
    super(props)
    // 初始化 state
    this.state = {
      n: 1,
      m: {
        name: 'April-cl',
        age: 18
      }
    }
  }
  onClick = () => {
    // setState 的第一个参数是新的 state，注意这里并没有改变 state.m
    this.setState({n: this.state.n+1})
    // 这里控制台打印 n 的值为 1 ，setState 不会立即改变 this.state，会在当前代码运行完后再去更新 this.state，从而触发 UI 更新
    console.log(this.state.n)
  }
  onClick1 = () => {
    // setState 的第一个参数是函数
    this.setState((state) => ({n: state.n + 1}))
    this.setState((state) => ({n: state.n + 1}))
  }
  onClick2 = () => {
    // setState 的第二个参数是成功后执行的回调函数
    this.setState({n: this.state.n+1}, () => {
      this.setState({n: this.state.n+2})
    })
  }
  render() {
    return (
      <div className="App">
        {this.state.m.name}
        <br /> 
        {this.state.n}
        <button onClick={this.onClick}>+1</button>
        <button onClick={this.onClick1}>+2</button>
        <button onClick={this.onClick2}>+3</button>
      </div>
    )
  }
}
export default App

注意点

• setState 不会立即改变 this.state
• setState 的第一个参数可以接受两种形式的参数，推荐使用函数

生命周期

生命周期执行顺序

挂载

• constructor
• static getDerivedStateFromProps
• render
• componentDidMount

更新

• static getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

卸载

• componentWillUnmount

生命周期函数

constructor

在 React 组件挂载之前被调用，在为 React.Component 子类实现构造函数时，应在其他语句之前调用 super()

用途：

• 初始化 state，但不能调用 setState

• 为事件处理函数绑定实例

  constructor() {
    /* 其它代码略 */
    this.onClick = this.onClick.bind(this)
  }
  onClick() {}

  上面也可以用新语法代替 👇

  constructor() {/* 其它代码略 */}
  onClick = () => {}

官方文档

static getDerivedStateFromProp （不常用）

在调用 render 方法之前调用，在初始化和后续更新都会被调用

返回一个对象来更新 state，如果返回 null 则不更新任何内容

官方文档

render

是 Class 组件中唯一必须实现的方法

用于展现视图

只能有一个根元素，如果有多个元素则需用 <></> 包裹起来

render 里面可以写

• if … else …
• ? : 表达式
• array.map 循环

如果 shouldComponentUpdate() 返回 false，则不会调用 render()

官方文档

componentDidMount

在组件挂载后（插入 DOM 树中）立即调用

官方推荐在此处发起加载数据的 AJAX 请求

官方文档

shouldComponentUpdate

返回 true 时允许更新 UI，返回 false 时阻止更新 UI

允许手动判断师傅要进行组件更新，我们可以根据应用场景灵活地设置返回值，以避免不必要的更新

官方文档

getSnapshotBeforeUpdate （不常用）

在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate

官方文档

componentDidUpdate

在视图更新后执行代码，首次渲染不会执行

在此处直接调用 setState 必须被包裹在一个条件语句里

官方推荐在此处发起更新数据的 AJAX 请求

如果 shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()

官方文档