追境的笔记

# 注意事项

# 生命周期

https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillmount

  1. 挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()
  1. 更新 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
  1. 卸载

当组件从 DOM 中移除时会调用如下方法：

  • componentWillUnmount()
  1. 错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

  • static getDerivedStateFromError()
  • componentDidCatch()

# 事件处理的this指向

# 方式一

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 方式二

class LoggingButton extends React.Component {
  constructor(props) {
    super(props);
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 向事件处理程序传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
1
2

上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

# 受控组建

渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

# 非受控组建

<input type="file" />因为它的 value 只读，所以它是 React 中的一个非受控组件。

# 函数组建

只有props，没有自己的state的时候可以写函数组建

← Hook →