React Hooks 追加状态 - Javascript

React Hooks 是 React 16.8 新特性之一，它为函数组件引入了 state 和其他的 React 特性。Hooks 使得在不使用类组件的情况下也能够使用 React 的特性，从而更加方便和灵活地编写组件。

state Hook

在函数组件中使用 useState Hook 可以为组件添加状态。useState 接受一个初始值，并返回一个数组，第一个元素是状态值，第二个元素是更新状态的函数。

import React, { useState } from 'react';

function Example() {
  // 声明一个新的叫做 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上面的例子中，useState 定义了一个状态变量 count ，它的初始值是 0 。我们还在组件中添加了一个按钮，当按钮被点击时，会调用更新状态的函数 setCount，将 count 的值 +1 。

effect Hook

使用 useEffect Hook 可以在函数组件中执行副作用操作，比如数据获取和 DOM 操作。useEffect 接受两个参数，第一个是一个回调函数，第二个是一个数组，它们很重要，请务必仔细阅读。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 类似于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    // 更新文档标题
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上面的例子中，我们使用 useEffect 来更新文档标题。每当 count 改变时，useEffect 回调函数就会被调用，重新设置文档标题。如果没有传递第二个参数，则 useEffect 会在每次组件渲染完成后都执行，这可能会导致性能问题。上面的例子说明了需要传递一个空数组作为第二个参数，这样 useEffect 只会在初次渲染时执行。

如果你希望 useEffect 在某个特定的变量改变时运行，你可以将变量放在第二个参数数组中：

import React, { useState, useEffect } from 'react';

function Example({ visible }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 在 visible 变化时运行
    console.log('visible changed');
  }, [visible]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上面的例子中，每次 visible 变化时，useEffect 回调函数就会被调用，输出 'visible changed' 。

总结

React Hooks 为函数组件引入了状态和副作用操作。它使组件更加方便和灵活，减少了代码量和复杂性。在使用 Hooks 时，请记住每一个 Hook 的特性和注意事项，以免在代码编写时出现错误。