React 中的 Hooks

本文作者系360奇舞团前端开发工程师

Hooks 的作用

Hooks 是 React 16.8 版本引入的一项特性，它允许在函数式组件中使用状态和其他 React 特性，而不需要使用类组件。Hooks 就是钩子，作用是把某个目标结果钩到某个可能会变化的数据源或者事件源上，那么当被钩到的数据或事件发生变化时，产生这个目标结果的代码会重新执行，产生更新后的结果。

常用的钩子

useState

1. useState（initialState）有一个初始化值作为参数，initialState 可以是任意值

2. 返回包含两个值数组，第一个是值，第二个是 set 方法

需要注意的一点，setCount 后，直接获取 count,count 的值是不变的，这是因为 useState 是一个异步操作，它并不会立即更新状态。当你在函数组件中调用 useState 更新状态时，React 会将新的状态安排进下一次渲染，并在之后的某个时候才会执行更新，这导致在更新状态后立即访问该状态可能会得到之前的值，而不是最新的值。

//这是一个useState简单使用实例
function Plus() {
  const [count, setCount] = useState(1);
  function counter(){
     setCount(count+1)
  }
  return (
    
        
{count}
     +

    

  ); }

useEffect（执行副作用）

副作用是指一段和当前执行结果无关的代码，比如说要修改函数外部的某个变量，要发起一个请求有两个参数。useEffect 有两个参数第一个参数是 callback，第二个是个依赖数组，这个数组可以为空

// 在这里count的值发生变化时，clikValue的值及跟着变化，在这个callback里也可以发起网络请求
function CountPlus() {
  const [count, setCount] = useState(0);
  const [clikValue, setClickValue] = useState("");

  useEffect(() =>{
    setClickValue("我点击了"+count+"次")

  },[count])
  function counter(){
     setCount(count+1)
  }
  return (
    
        
{count}
      +

      

{clikValue}

    

  ); } export default CountPlus;

useContext

可以用来在组件树中传递数据

//User：是消费提供的值的地方
import React, { useContext  } from 'react';
import UserContext from './UserContext';
import '.././index.css';

function User() {
  const user = useContext(UserContext)

  return (
    
      
{user.name}
      
{user.sex}
    

  ); } export default User;

// UserContext：创建上下文

import { createContext } from 'react';

const UserContext = createContext();

export default UserContext;

//App：是提供上下文值的地方
import User from "./componts/User";
import UserContext from "./componts/UserContext";
import './App.css';
function App() {
  return (