【React深入】从Mixin到HOC再到Hook(12)

通过useState，我们使用函数式组件也能实现这样的功能：

export default function HookTest() {  
  const [count, setCount] = useState(0);  
  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => { setCount(count + 1); setNumber(number + 1); }}>  
        Click me  
        </button>  
    </div>  
  );  
} 

useState是一个钩子，他可以为函数式组件增加一些状态，并且提供改变这些状态的函数，同时它接收一个参数，这个参数作为状态的默认值。

Effect Hook

Effect Hook 可以让你在函数组件中执行一些具有 side effect（副作用）的操作

参数

useEffect方法接收传入两个参数：

•  1.回调函数：在第组件一次render和之后的每次update后运行，React保证在DOM已经更新完成之后才会运行回调。
•  2.状态依赖(数组)：当配置了状态依赖项后，只有检测到配置的状态变化时，才会调用回调函数。 

useEffect(() => {  
   // 只要组件render后就会执行  
 });  
 useEffect(() => {  
   // 只有count改变时才会执行  
 },[count]); 

回调返回值

useEffect的第一个参数可以返回一个函数，当页面渲染了下一次更新的结果后，执行下一次useEffect之前，会调用这个函数。这个函数常常用来对上一次调用useEffect进行清理。

export default function HookTest() {  
  const [count, setCount] = useState(0);  
  useEffect(() => {  
    console.log('执行...', count);  
    return () => {  
      console.log('清理...', count);  
    }  
  }, [count]);  
  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => { setCount(count + 1); setNumber(number + 1); }}>  
        Click me  
        </button>  
    </div>  
  );  
} 

执行上面的代码，并点击几次按钮，会得到下面的结果：

（编辑：ASP站长网）