React Hook 概述

什么是 Hook:

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

这篇文章有什么:

  这里不过多阐述使用 Hook 的动机,网上都有,如果一定要用 Hook ,这片文章将收集,初次使用 Hook ,所需要知道的干货。

Hook 知识点:

  State Hook | Effect Hook | useContext | useReducer | useCallback | useCallback | useRef    

State Hook:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

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

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

useState:主要是为了给函数添加状态的。最好(必须)在函数的最外层申明使用,不要在if或者else里面使用。

initialState:是 state 的初始值,不限制数据类型,不写默认 undefined。

setState:是改变 state 的方法,类似于原来的 setState({state:false }),区别是没有钩子函数,也就是不能这样- ->  setState({state:false }, () => { console.log(state) })  操作。 setState 函数用于更新 state,它接收一个新的 state 值并将组件的一次重新渲染加入队列(注意:可以在 render 中使用 setState ,不会重复触发 render)。

在后续的重新渲染中,useState 返回的第一个值将始终是更新后最新的 state。

 

useContext 

之前我们使用context (上下文)来解决多层嵌套传props,分三步

  1. createContext创建Context
  2. 使用Context.Provider组件提供数据
  3. Context.Provider的所有后代组件,都可以通过Context.Consumer使用数据数据
const ColorContext = React.createContext('black')

function Button(props){
    return (
      <ColorContext.Consumer>
      {color=>
        <button style={{ background: color }}>
          {color,props.children}
        </button>}
      </ColorContext.Consumer>
    );
}

function MiddleWare(){
  return (
    <Button>我来了</Button>
  )
}

function App() {
  return (
    <div>
      <ColorContext.Provider value='yellow'> 
        <MiddleWare></MiddleWare>
      </ColorContext.Provider>
    </div>
  );
}

useContext方案

  不再需要 consumer,

+useContext接收一个createContext()返回的对象

function Button2(props){
  const color = useContext(ColorContext)
  return <button style={{ background: color }}>{(color, props.children)}</button>
}

  可以提供Provider以改变传值

function MiddleWare(props) {
  return 
    <ColorContext.Provider value="yellow">
        <Button2>指定provider</Button2>
    </ColorContext.Provider>
}

 

上一篇:react+antd 点击分页为上次操作结果


下一篇:我在学习React等一系列产物中遇到的那些坑