React Hook 概述

2024-02-07 10:57:05

什么是 Hook：

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

这篇文章有什么：

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

Hook 知识点：

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,分三步

createContext创建Context
使用Context.Provider组件提供数据
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>
}

码农公寓