react中State&生命周期

在React中，State和生命周期是构建动态和交互式组件的关键概念。下面将分别详细介绍React中的State和生命周期。

React中的State

State是React组件内部的数据源，用于描述组件的状态。当组件的状态发生变化时，React会自动重新渲染组件，并将新的状态传递给组件的render方法，从而更新组件的UI。State具有以下几个重要特点：

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

更新State的方法是通过调用this.setState方法，该方法接收一个对象，其中包含要更新的属性及其新值。React会自动合并这些变化，并只重新渲染需要更新的部分。

React的生命周期

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

挂载阶段（Mounting）

当组件实例被创建并插入DOM中时，会依次调用以下生命周期方法：

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

更新阶段（Updating）

当组件的props或state发生变化时，会触发更新，依次调用以下生命周期方法：

• static getDerivedStateFromProps(props, state)（同上）。
• 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，使得函数式组件也能够拥有类似类组件的状态和生命周期功能。