react的hooks

hooks允许在不编写类的情况下使用state和其他属性。hooks解决了组件之间复用状态逻辑很难的问题,同时也避免了高阶组件(HOC)和render props等模式导致的组件树层次过深的问题。

主要的hooks

useState

它允许你在函数组件中添加state，它返回一个状态变量和一个更新该状态的函数，在初次渲染时，状态变量的值由传递给useState的参数决定。

import React, { useState } from 'react';  
 
function Example() {  
  const [count, setCount] = useState(0);  
 
  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>  
        Click me  
      </button>  
    </div>  
  );  
}

 useEffect

它是用于在函数组件中执行副作用的hook，它接收一个包含命令式、可能具有副作用的代码函数。

默认情况下，useEffect在每次渲染后都会执行。

import React, { useEffect, useState } from 'react';  
 
function Example() {  
  const [count, setCount] = useState(0);  
 
  useEffect(() => {  
    // 更新文档的标题  
    document.title = `You clicked ${count} times`;  
  });  
 
  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>  
        Click me  
      </button>  
    </div>  
  );  
}

useMemo

返回一个记忆化的值，它只会在依赖项发生变化时重新计算，避免了在每次渲染时都重新计算这些值。

useRef

返回一个可变的ref对象，返回的对象将在组件的整个生命周期内保持不变。

hooks的引入极大地扩展了函数组件的功能，使得在react中编写复杂的组件变得更加简单和灵活。