reactjs - 何时使用React Hooks

Question

我试图理解钩子的重要性

从React文档中，它说

They let you use state and other React features without writing a class.

功能组件背后的整个想法不是不是无状态的，这样就不会引起React App的重新渲染吗？就像，如果您要使用React钩子，您将在何处以及为什么使用它？

您始终可以自己创建一个状态，该状态不会导致功能组件const state = {}的重新渲染

我的问题是：


状态在功能组件中的优势是什么
什么时候在react中使用react-hooks而不是实际的基于状态的组件

Answer 1

我会尽量简洁。在React 16.8 .. Hooks中引入的React Hooks洁具使在组件中组织逻辑成为可能，从而使它们很小且可重用，而无需编写class。从某种意义上讲，它们是React依赖函数的方式，因为在它们之前，我们必须将它们编写在组件中，并且尽管事实证明组件本身具有强大的功能，但是它们必须在前端。在某种程度上来说，这一切都很好，很花哨，但是结果是DOM充满了div，使得粗略地浏览DevTools并进行调试非常麻烦。

好吧，React Hooks改变它。不必依赖于组件的自上而下的流程或以各种方式（如higher-order components（HOC））来抽象组件，我们可以调用和管理组件内部的流程。

挂钩在组件内部而不是仅在组件之间应用React原理（明确的数据流和组合）。与渲染道具或高阶组件等模式不同，Hooks不会在组件树中引入不必要的嵌套。

此外，React Hooks可以帮助您：



-无需学习，记忆，实施生命周期方法：

这-componentDidMount

class Example extends React.Component {
  componentDidMount() {
    console.log('I am mounted!');
  }
  render() {
    return null;
  }
}

变成：

useEffect挂钩

function Example() {
  useEffect(() => console.log('mounted'), []);
  return null;
}

这-componentDidUpdate

componentDidMount() {
  console.log('mounted or updated');
}

componentDidUpdate() {
  console.log('mounted or updated');
}

变成：

useEffect(() => console.log('mounted or updated'));

componentWillUnmount

componentWillUnmount() {
  console.log('will unmount');
}

变成：

useEffect(() => {
  return () => {
    console.log('will unmount');
  }
}, []);

... 仅举几个



-复杂的组件变得难以理解：

我们常常不得不维护一些组件，这些组件起初很简单，但是发展成为状态逻辑和副作用难以控制的混乱状态。每个生命周期方法通常包含不相关的逻辑，在很多情况下，由于有状态逻辑无处不在，因此无法将这些组件分解为较小的组件。测试它们也很困难。挂钩使您可以根据相关的部分（例如，建立订阅或获取数据）将一个组件拆分为较小的功能，而不必根据生命周期方法进行拆分。您还可以选择使用化简器管理组件的本地状态，以使其更加可预测。
我可以建议研究一下useEffect挂钩。

-可组合，可重用逻辑：

很难在组件之间重用状态逻辑。使用Hooks，您可以从组件中提取状态逻辑，以便可以对其进行独立测试和重用。挂钩允许您重用状态逻辑，而无需更改组件层次结构。这使得在许多组件之间或与社区共享钩子变得容易。本质上，我们可以build our own custom Hooks



我们只是简单地介绍了React挂钩的功能，但希望可以为您奠定坚实的基础。以下是一些预定义的挂钩：


userReducer（）
useState的替代方法。接受类型为(state, action) => newState的化简器，并返回与dispatch方法配对的当前状态。
useMemo（）
返回一个记忆值。传递“创建”函数和输入数组，useMemo仅在其中一个输入发生更改时才重新计算存储的值。
useRef（）
useRef返回一个可变的ref对象，该对象的.current属性被初始化为传递的参数（initialValue）。返回的对象将在组件的整个生存期内持续存在。
useContext（）
现在，您可以使用Context API在功能组件中使用useContext()。这使您免于支撑钻的麻烦。




这是一些[希望]引导您回家的图表



从本质上反应钩子





React Hooks-深入了解：





React Hooks生命周期：



基于类的组件生命周期：





我希望你现在有点迷上了:)