react的State&生命周期

React的State和生命周期是React框架中非常重要的概念，它们共同协作以实现组件的动态更新和高效渲染。以下是对React的State和生命周期的详细解析：

React的State

定义与作用：

• 状态（State）是React组件内部的数据源，用于描述组件的状态。当组件的状态发生变化时，React会自动重新渲染组件，并将新的状态传递给组件的render方法，从而更新组件的UI。
• State属性是每个React组件的私有属性，只能在组件内部使用。通过调用this.setState方法来更新state，setState接收一个对象，其中包含要更新的属性及其新值。React会自动合并这些变化，并只重新渲染需要更新的部分。

使用注意事项：

• State应该始终视为只读属性。组件只能通过调用setState方法来更新它，而不能直接更改它的值。直接更改state属性的值可能会导致不可预期的结果，因为React可能会在其内部使用异步方式更新状态。
• React中的state属性不仅可以存储简单的数据类型，还可以存储对象和数组等复杂数据类型。这使得开发者能够更灵活地控制组件的状态，提高组件的复用性和可维护性。

React的生命周期

React的生命周期指的是组件从被创建出来，到被使用，最后被销毁的整个过程。在这个过程中，React提供了会自动执行的不同的钩子函数，我们称之为生命周期函数。React的生命周期可以分为三个阶段：挂载、更新、卸载。

挂载阶段（Mounting）：

• 当组件实例被创建并插入DOM中时，会依次调用以下生命周期方法：
  • constructor()：在React组件挂载之前，会调用它的构造函数。主要用于初始化state或进行方法绑定。
  • static getDerivedStateFromProps()（可选）：在调用render方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新state，如果返回null则不更新任何内容。
  • render()：是class组件中唯一必须实现的方法。当render被调用时，它会检查this.props和this.state的变化并返回React元素、数组或fragments等。
  • componentDidMount()：在组件挂载后（插入DOM树中）立即调用。适合进行网络请求、添加订阅等操作。

更新阶段（Updating）：

• 当组件的props或state发生变化时，会触发更新，依次调用以下生命周期方法：
  • static getDerivedStateFromProps()（同上）。
  • shouldComponentUpdate(nextProps, nextState)：用于判断组件是否需要更新。默认返回true，表示组件将重新渲染。
  • render()（同上）。
  • getSnapshotBeforeUpdate(prevProps, prevState)：在最近一次渲染输出（提交到DOM节点）之前调用。它使得组件能在发生更改之前从DOM中捕获一些信息。
  • componentDidUpdate(prevProps, prevState, snapshot)：在更新后会被立即调用。可以在此处对DOM进行操作，但需要注意避免无限循环。

卸载阶段（Unmounting）：

• 当组件从DOM中移除时，会调用componentWillUnmount()方法。该方法会在组件卸载及销毁之前直接使用，用于执行必要的清理操作，如清除定时器、取消网络请求或清除订阅等。

注意：

• 在React的新版本中，一些旧的生命周期方法（如componentWillMount、componentWillReceiveProps、componentWillUpdate）被标记为不安全（UNSAFE_前缀），并计划在未来版本中移除。建议在新开发的应用中使用新的生命周期方法或Hooks来替代这些旧方法。
• 对于函数式组件，React 16.8 版本引入了Hooks，如useState和useEffect，使得函数式组件也能够拥有类似类组件的状态和生命周期功能。