【前端学习笔记】React之组件和React.Component

组件类型:

函数式组件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

在 React 组件中，代码重用主要通过组合而不是继承来实现。

React.Component

先回顾下组建的生命周期：

Mounting(装载)
当组件实例被创建并将其插入 DOM 时，将按以下顺序调用这些方法：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Updating(更新)
更新可以由对 props 或 state 的更改引起。当重新渲染组件时，按以下顺序调用这些方法：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Unmounting(卸载)
当一个组件从 DOM 中删除时，将调用此方法：

• componentWillUnmount()

每个组件还提供了一些其他 API：

setState()
setState(updater, [callback])
setState() 排队更改组件的 state ，并通过更新 state 来告诉 React ，该组件及其子组件需要重新渲染。这是用于 响应事件处理程序 和 服务器响应 更新用户界面的主要方法。

记住 setState() 作为一个请求，而不是立即命令来更新组件。为了更好的感知性能，React 可能会延迟它，然后合并多个setState()更新多个组件。 React不保证 state 更新就立即应用(重新渲染)。

setState() 并不总是立即更新组件。它可能会 批量 或 延迟到后面更新。这使得在调用 setState() 之后立即读取 this.state 存在一个潜在的陷阱。 而使用 componentDidUpdate 或 setState 回调（setState(updater, callback)），在应用更新后，都将被保证触发。如果你需要根据先前的 state 设置 state，阅读下面的 updater 参数。

**setState() 总是会导致重新渲染，除非 shouldComponentUpdate() 返回 false 。**如果可变对象被使用，并且条件渲染逻辑不能在 shouldComponentUpdate() 中实现，只有当新 state 与先前 state 不同时调用 setState() 才能避免不必要的重新渲染。

forceUpdate()
component.forceUpdate(callback)
默认情况下，当组件的 state 或 props 改变时，组件将重新渲染。 如果你的 render() 方法依赖于一些其他数据，你可以告诉 React 组件需要通过调用 forceUpdate() 重新渲染。

**调用 forceUpdate() 会导致组件跳过 shouldComponentUpdate() ，**直接调用 render()。 这将触发子组件的正常生命周期方法，包括每个子组件的 shouldComponentUpdate() 方法。 如果标记（markup）更改，React 仍将更新 DOM 。

通常你应该尽量避免使用 forceUpdate() ，并且 render() 中的 this.props 和 this.state 应该是只读的。
类属性

• defaultProps
• displayName

实例属性

• props
• state