何时使用 React Hook

Question

何时使用 React Hook

我试图理解 Hooks 的重要性

从 React 文档，它说

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

Run Code Online (Sandbox Code Playgroud)

功能组件背后的整个想法是不是将是无状态的，这样它就不会导致重新渲染 React 应用程序？比如，如果你要使用 react hooks，你会在哪里以及为什么使用它？

你总是可以自己创建一个状态，它不会导致功能组件的重新渲染 const state = {}

我的问题是：

状态在功能组件中的优势是什么
什么时候在反应中使用反应钩子而不是实际的基于状态的组件

Answer 1

Dze*_* H. 14

我会尽量简洁。React Hooks ware 在React 16.8 中引入。. Hooks使在组件中组织逻辑成为可能，使它们变得小巧且可重用，而无需编写class. 从某种意义上说，它们是 React 倾向于使用函数的方式，因为在它们之前，我们必须将它们写在一个组件中，虽然组件本身已经被证明是强大的和功能性的，但它们必须在前端。在某种程度上，这一切都很好，但结果DOM是到处都是 div，这使得深入挖掘DevTools和调试变得困难重重。

嗯，React Hooks改变它。higher-order components我们可以在组件内部调用和管理流，而不是依赖于自上而下的组件流或以各种方式抽象组件，例如(HOC) 。

Hook 将 React 哲学（显式数据流和组合）应用于组件内部，而不仅仅是组件之间。与渲染道具或高阶组件等模式不同，Hook 不会在组件树中引入不必要的嵌套。

此外，`React Hooks`还可以帮助您：

-无需学习、记忆、实现生命周期方法：

这- componentDidMount

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

Run Code Online (Sandbox Code Playgroud)

变成：

useEffect 钩子

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

Run Code Online (Sandbox Code Playgroud)

这- componentDidUpdate

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

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

Run Code Online (Sandbox Code Playgroud)

变成：

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

Run Code Online (Sandbox Code Playgroud)

组件将卸载

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

Run Code Online (Sandbox Code Playgroud)

变成：

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

Run Code Online (Sandbox Code Playgroud)

...仅举几例

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

我们经常不得不维护一些组件，这些组件开始时很简单，但后来变成了难以管理的状态逻辑和副作用混乱。每个生命周期方法通常包含不相关逻辑的混合，在许多情况下，不可能将这些组件分解成更小的组件，因为有状态逻辑无处不在。测试它们也很困难。Hook 允许您根据相关的部分（例如设置订阅或获取数据）将一个组件拆分为更小的功能，而不是根据生命周期方法强制拆分。您还可以选择使用 reducer 管理组件的本地状态，以使其更具可预测性。
我可以建议调查一下useEffect钩子。

-可组合、可重用的逻辑：

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

我们只是触及了 React 钩子能够做的事情的表面，但希望这为您提供了坚实的基础。这里还有一些预定义的钩子：

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