useState 和 useEffect 有什么区别？

Question

我在 react v16 中看到了这两个新概念。

按照我的理解：

useState类似于带有钩子的setState ，而useEffect工作方式类似于生命周期方法。

我的理解正确吗？ 如果不是， useState和useEffect之间的确切区别是什么？

Answer 1

简单来说， useState和useEffect增强了功能组件，使它们做类可以做但功能组件（没有钩子）不能做的事情：

• useState允许功能组件具有state ，例如类组件中的this.state 。
• useEffect允许功能组件在一个 API 中拥有生命周期方法（例如componentDidMount 、 componentDidUpdate和componentWillUnmount ）。

---

请参阅以下示例以获取进一步说明：

useState

 class CounterClass extends React.Component { constructor(props) { super(props); this.state = { count: 1 }; } render() { return <div> <p>Count: {this.state.count}</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increase</button> </div>; } } function CounterFunction() { const [count, setCount] = React.useState(1); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)} >Increase</button> </div> ); } ReactDOM.render( <div> <CounterClass /> <CounterFunction /> </div> , document.querySelector('#app'));

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

useEffect

 class LifecycleClass extends React.Component { componentDidMount() { console.log('Mounted'); } componentWillUnmount() { console.log('Will unmount'); } render() { return <div>Lifecycle Class</div>; } } function LifecycleFunction() { React.useEffect(() => { console.log('Mounted'); return () => { console.log('Will unmount'); }; }, []); // Empty array means to only run once on mount. return ( <div>Lifecycle Function</div> ); } ReactDOM.render( <div> <LifecycleClass /> <LifecycleFunction /> </div> , document.querySelector('#app'));

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

在官方 React 文档中阅读有关useState和useEffect 的更多信息。

Answer 2

对于useState()

首先，我们有不支持state的功能组件，换句话说，功能组件是无状态组件。

现在，有了 Hooks，我们有了函数式组件但有状态的。 它是通过使用useState实现的。

---

对于useEffect()

首先，对于无状态功能组件，我们没有组件生命周期钩子。 换句话说，无论何时你想使用组件生命周期钩子，你都应该考虑使用类组件。

现在，我们可以在不使用类 component 的情况下使用组件生命周期钩子。 它是通过使用useEffect实现的。 换句话说，现在每当我们想要使用组件生命周期钩子时，我们已经有两个选择，要么使用类组件，要么使用带有useEffect钩子。

---

更新

useState和useEffect之间的确切区别是什么？

简单来说， useState允许我们曾经是无状态的功能组件变成有状态的。 useEffect允许我们的功能组件利用组件生命周期钩子，过去只支持类组件。

Answer 3

useState和useEffect是 React 16.8+ hooks 生态系统的一部分，旨在为 Functional 组件提供与以前仅适用于基于类的组件（ state / setState和组件生命周期方法（例如componentDidMount 、 componentDidUpdate和componentWillUnmount ））相同的功能

useState()是直截了当的，它允许您在功能组件中拥有状态访问器。

useEffect()可以组合componentDidMount 、 componentDidUpdate和componentWillUnmount但很棘手。

您可以从hooks 的官方文档中解读我在这里讨论的大部分内容。 看到工作中的钩子比从文本中推理更容易。

预渲染生命周期

预渲染生命周期事件相当于componentWillReceiveProps或getDerivedStateFromProps和componentWillMount可以是我们在返回 JSX（反应节点）之前首先在功能组件中做的事情，因为函数本身相当于基于类的组件的render(…)方法。

我们不需要钩子来处理预渲染生命周期事件。

渲染后生命周期

渲染后的生命周期事件，这些相当于componentDidMount ， componentDidUpdate和componentDidUnmount在基于类的组成部分。

我们需要** **_useEffect(…)_**来处理这些渲染后生命周期事件** 因为我们不能在主组件函数中编写与这些生命周期事件相关的逻辑，因为它们应该在组件函数之后运行将 JSX (react-node) 返回到react-dom渲染器。

这意味着，我们可以用钩子做很多事情。 如何？

我们知道useEffect(fn, […watchStates])接受 2 个参数。

1. fn ：（必需） useEffect调用此函数以在每个渲染周期后根据正在跟踪的值（2）参数给出的更改作为副作用运行。 函数fn可以返回另一个函数，该函数应该在效果函数再次运行或组件卸载之前作为清理运行
2. […watchValues ] ：（可选） useEffect跟踪此数组中的值已从上一个渲染周期更改，然后仅调用效果fn 。 如果未给出此参数，则效果将在每个渲染周期中运行。

如果我们不一起传递 (2) 参数， fn的效果逻辑将在每个渲染周期后调用。

如果我们传递带有值的 (2) 数组，组件需要监视更改，并在更改时调用fn ，这非常不言自明。

最棘手的部分是使用空数组[]作为 (2) 参数，我们可以将fn的副作用逻辑限制为仅在安装阶段执行，因为在后续渲染周期之后效果钩子不会监视任何更改再次触发fn 。

import React, { useState, useEffect } from "react";
export default props => {
  console.log("componentWillMount");
  console.log("componentWillReceiveProps", props);
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [moveCount, setMoveCount] = useState(0);
  const [cross, setCross] = useState(0);
  const mouseMoveHandler = event => {
    setX(event.clientX);
    setY(event.clientY);
  };
  useEffect(() => {
    console.log("componentDidMount");
    document.addEventListener("mousemove", mouseMoveHandler);
    return () => {
      console.log("componentDidUnmount");
      document.removeEventListener("mousemove", mouseMoveHandler);
    };
  }, []); // empty-array means don't watch for any updates
  useEffect(
    () => {
      // if (componentDidUpdate & (x or y changed))
      setMoveCount(moveCount + 1);
    },
    [x, y]
  );
  useEffect(() => {
    // if componentDidUpdate
    if (x === y) {
      setCross(x);
    }
  });
  return (
    <div>
      <p style={{ color: props.color }}>
        Your mouse is at {x}, {y} position.
      </p>
      <p>Your mouse has moved {moveCount} times</p>
      <p>
        X and Y positions were last equal at {cross}, {cross}
      </p>
    </div>
  );
};

代码片段很简单，一目了然。 您可以在CodePen上试用。

需要注意的一件重要事情是，如果您在效果内部进行状态更改，请确保从监视数组中排除内部正在更改的状态。

例如，在第二个效果（计算鼠标移动的效果）中，我们仅在 x 和 y 上的更新时触发它，通过将[x , y]作为第二个参数传递[x , y]因为

1. 观察 x 和 y 的变化以注册鼠标移动在逻辑上是正确的
2. 如果我们不排除 moveCount 被观察，这个 useEffect 将进入一个无限循环，因为我们将更新我们也在观察变化的相同值

---

这篇文章也可以在我的Medium出版物上发表。 如果您喜欢本文，或有任何意见和建议，请在Medium上鼓掌或发表评论。