React Hook

React Hook

React Hook简介简单总结一下userState

简介

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

注：Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class

注：Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class

注：Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class

（重要的事情说三遍）

简单总结一下

作用	hook
自更新能力	setState，使用useState
访问ref	使用useRef或useImperativeMethods
访问context	使用useContext
使用更高级的setState设置	useReducer
进行类似生命周期的阶段性方法	useEffect或useLayoutEffect

userState

const [state, setState] = useState(initialState);

返回一个 state，以及更新 state 的函数。

在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

setState(newState);

列子代码

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>

);

}

注意

React 会确保 setState 函数的标识是稳定的，并且不会在组件重新渲染时发生变化。

这就是为什么可以安全地从 useEffect 或 useCallback 的依赖列表中省略 setState。