useState#

useSate 是一个 React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。

useState 是一个函数，返回值是一个数组；
数组中的第一个参数是状态变量，第二个参数是 set 函数用来修改状态变量；
useState 的参数将作为第一个参数的初始值。

import React, { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  const handleClick = (num) => {
    setCount(count + num)
}
return (
  <div>
    <button onClick={() => handleClick(5)}>{count}</button>
  </div>
);
}

export default App;

import React, { useState } from 'react'

function App() {
  const [form, setForm] = useState({
    name: 'Sytus',
    age: 17,
  })
  const handleClick = (age) => {
    setForm({
      ...form,
      age,
    })
  }
  return (
    <div>
      <button onClick={() => handleClick(5)}>{form.age}</button>
    </div>
  );
}

export default App;

useContext#

使用 Context 的机制可以实现跨层级的组件通信。

// 创建 Context
import React, { createContext } from 'react';

const MyContext = createContext();

export default MyContext;

// 父组件
import React from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const value = "Hello from parent";

  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

export default ParentComponent;

// 子组件 ChildComponent.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

function ChildComponent() {
  const valueFromContext = useContext(MyContext);

  return (
    <p>Received value from parent: {valueFromContext}</p>
  );
}

export default ChildComponent;

在这个示例中，useContext 钩子接收一个 Context 对象（这里是 MyContext），并返回该 Context 的当前值。在子组件 ChildComponent 中使用 useContext 钩子获取了父组件传递的值，并直接使用这个值渲染了内容。

使用 useContext 可以更便捷地在函数组件中获取 Context 中的值，而无需使用 Context.Consumer。

useEffect#

useEffect 是一个 React Hook 函数，用于在 React 组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送 AJAX 请求，更改 DOM 等等。

import {useEffect} from 'react'
useEffect(() => { 
    // 副作用逻辑
    return () => {
        // 清除副作用逻辑
}
}, [])

参数1是一个副作用函数，在函数内部可以放置要执行的操作。最后返回的函数可以在组件卸载的时候清除造成的副作用（例“清除定时器”）；
参数2是一个数组（可选参），在数组里放置依赖项，不同的依赖项会影响第一个参数的执行。
1. 没有依赖项：组件初始渲染+组件更新时执行副作用函数；
2. 空数组依赖项：只在初始渲染时执行一次；
3. 添加特定依赖项：组件初始渲染+特性依赖项变化时执行。

import {useState, useEffect} from 'react'

...
const [count, setCount] = useState(0)
const useEffect((console.log('count改变了')), [count]) //只有count改变时执行

useRef#

它用于在函数组件中引用对象，并在重新呈现之间保留被引用对象的状态。

它可以在函数组件存储或查找组件内的标签或任意其他数据。

import {useRef} from 'react'

const refEle = useRef()
const handleClick = () => {
  console.log(refEle.current); // DOM元素 打印 <input type="text"/>
}
rerurn (
    <div>
        <input type="text" ref={myRef} />
        <button onClick={() => handleClick()}>Click</button>
    </div>
)

自定义Hook函数#

概念：自定义 Hook 是以 use 开头的函数，通过自定义 Hook 函数可以用来实现逻辑的复用和封装。

封装自定义 Hook 的通用思路：

生命一个 use 开头的函数；
在函数体内部封装可复用的逻辑；
把其他组件需要用到的状态或者回调函数 return 出去，以对象或者数组的形式；
在哪个组件中需要用到此逻辑，则去执行这个自定义函数，解构出状态和回调函数使用。

import React, { useState } from 'react'

function useToggle() {
  // 可复用的逻辑代码
  const [value, setValue] = useState(true)
  const toggle = () => {
    setValue(!value)
  }

  // 哪些状态和回调函数需要在其他组件中使用，将其return
  return {
    value,
    toggle
  }
}

export default function App() {
  const {value, toggle} = useToggle()

  return (
    <div>
      {value && (<div>This is value</div>)}
      <button onClick={() => toggle()}>toggle</button>
    </div>
  )
}

ReactHooks使用规则#

只能在组件或者其他自定义 Hook 函数中调用；
只能在组件的顶层调用，不能嵌套在 if、for、其他函数中。