useState

useEffect

替代 Class Component 中 componentDidMount、componentDidUpdate、componentWillUnmount 等部分生命周期

useReducer是 useState 的替代方案

使用格式：const [state, dispatch] = useReducer(reducer, initialArg, init) 它是 useState 的替代方案，在一些场景使用：

state 逻辑较复杂且包含多个子值
下一个 state 依赖于之前的 state

最重要的其实它的写法和 redux 差不多

useContext

接收一个 context 对象并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染。可用于组件间值传递

useMemo

使用格式：useMemo(() => fn, deps) 把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。可以当作 vue 中的计算属性

useRef

返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数如果想要访问子组件内的 ref 对象，子组件需要用 class 声明组件。

useCallback

参数是内联回调函数和依赖项数组，返回值是回调函数的memoized版，该回调函数仅在某个依赖项改变时才会更新。

【Demo】react hooks useContext实现父子组件通讯

父组件App.js

import CountContext from './CountContext';//
import Counter from './Counter' //子组件

export default function App() {
  const [ count, setCount ] = useState(0)
  return (
    <div>
      <p>计数器值为： { count }</p>
      <button onClick={ () => setCount(count+1)}>点我加一</button>
      <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    </div>
  )
}

子组件 Counter.jsx

import CountContext from './CountContext'

export default function Counter() {
  let count = useContext(CountContext)
  return (
    <h2>{count}</h2>
  )
}

公共组件 CountContext.jsx


const CountContext = createContext()
export default CountContext

react_Hooks