React Hooks 详解

image.png

一、useState

import React, { useState } from 'react';
const [n, setN] = useState(0)
const [user, setUser] = useState({name: '反派角色', age: 18})

注意事项1: 不可局部更新
state 是一个对象，不能setState部分更新
因为setState不会帮我们合并属性,React认为这应该是你自己要做的事情

function App(){
    const [user, setUser] = React.useState({name: '反派角色', age: 18})
    const onClick = () =>{
        // setUser不可以局部更新，如果只改变其中一个，那么整个数据都会被覆盖
        // setUser({
        //  name: 'Frank'
        // })
        setUser({
            ...user, // 拷贝之前的所有属性
            name: '反派角色！！！' // 这里的name覆盖之前的name
        })
    }
    return (
        <div className='App'>
            <h1>{user.name}</h1>
            <h2>{user.age}</h2>
            <button onClick={onClick}>Click</button>
        </div>
    )
}

注意事项2: 地址要变
setState(obj) 如果obj地址不变，那么React就认为数据没有变化，不会更新视图
注意事项3：异步

//使用 useEffect 解决
const [hoverId, setHoverId] = useState('');
setHoverId('100');
useEffect(() => {
  console.log(hoverId); // 这里是监控到的最新值
}, [hoverId]);

二、useEffect

副作用或简称作用
它跟类组件中 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API
useEffect 在浏览器渲染完成后执行

useEffect(() => {
  console.log('第一次渲染执行');
}, [])  // [] 里面的变量变化
useEffect(() => {
  console.log('state n变化执行');
}, [n]) // n 变化时执行
useEffect(() => {
  console.log('任何一个state变化都执行');
})

副作用函数还可以通过返回一个函数来指定如何“清除”副作用

useEffect(() => {
  window.addEventListener('scroll', scrollTop);
  return () => {
    window.removeEventListener('scroll', scrollTop);
  }
}, []}

三、useLayoutEffect

布局副作用
useEffect 在浏览器渲染完成后执行
useLayoutEffect 在浏览器渲染前执行
其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。
useLayoutEffect 内部的更新计划将被同步刷新。
尽可能使用标准的 useEffect 以避免阻塞视觉更新。
为了用户体验，优先使用 useEffect (优先渲染)

四、useContext

useContext钩子允许在不使用redux的情况下将数据传递给子元素
如果我们只需要将数据传递给child元素，则它是Redux的简单替代方案。

五、useReducr

useReducer与Redux中带有reducer功能的概念相似
它接收到输入，并基于调度动作和值将为我们提供修改后的更新状态。

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

六、useMemo、useCallback

React 中当组件的 props 或 state 变化时，会重新渲染视图，实际开发会遇到不必要的渲染场景；
用 React.memo() 包一层来解决, 这种写法是 React 的高阶组件写法，将组件作为函数(memo)的参数，函数的返回值(ChildComp)是一个新的组件。

子组件

function ChildComp () {
  console.log('render child-comp ...')
  return <div>Child Comp ...</div>
}

父组件

function ParentComp () {
  const [ count, setCount ] = useState(0)
  const increment = () => setCount(count + 1)

  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <ChildComp />
    </div>
  );
}

点击父组件中按钮，会修改 count 变量的值，进而导致父组件重新渲染，此时子组件压根没有任何变化(props、state)，但在控制台中仍然看到子组件被渲染的打印信息。

image.png

import React, { memo } from 'react'

const ChildComp = memo(function () {
  console.log('render child-comp ...')
  return <div>Child Comp ...</div>
})

此时再次点击按钮，解决了控制台打印子组件被渲染的信息了。
memo缓存的是组件本身，是站在全局的角度进行优化

可别以为到这里就结束了！
上面的例子中，父组件只是简单调用子组件，并未给子组件传递任何属性。
看一个父组件给子组件传递属性的例子：

子组件：（子组件仍然用 React.memo() 包裹一层）

import React, { memo } from 'react'

const ChildComp = memo(function ({ name, onClick }) {
  console.log('render child-comp ...')
  return <>
    <div>Child Comp ... {name}</div>
    <button onClick={() => onClick('hello')}>改变 name 值</button>
  </>
})

父组件

function ParentComp () {
  const [ count, setCount ] = useState(0)
  const increment = () => setCount(count + 1)

  const [ name, setName ] = useState('hi~')
  const changeName = (newName) => setName(newName)  // 父组件渲染时会创建一个新的函数

  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <ChildComp name={name} onClick={changeName}/>
    </div>
  );
}

父组件在调用子组件时传递了 name 属性和 onClick 属性，此时点击父组件的按钮，可以看到控制台中打印出子组件被渲染的信息。

image.png

解决这个问题需要 useCallback 钩子进一步完善这个缺陷
修改父组件的 changeName 方法，用 useCallback 钩子函数包裹一层。

import React, { useCallback } from 'react'

function ParentComp () {
  // ...
  const [ name, setName ] = useState('hi~')
  // 每次父组件渲染，返回的是同一个函数引用
  const changeName = useCallback((newName) => setName(newName), [])  

  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <ChildComp name={name} onClick={changeName}/>
    </div>
  );
}

useCallback() 起到了缓存的作用，即便父组件渲染了，useCallback() 包裹的函数也不会重新生成，会返回上一次的函数引用。 此时点击父组件按钮，控制台不会打印子组件被渲染的信息了。

问题还是存在的
下面例子中，父组件在调用子组件时传递 info 属性，info 的值是个对象字面量，点击父组件按钮时，发现控制台打印出子组件被渲染的信息。

import React, { useCallback } from 'react'

function ParentComp () {
  // ...
  const [ name, setName ] = useState('hi~')
  const [ age, setAge ] = useState(20)
  const changeName = useCallback((newName) => setName(newName), [])
  const info = { name, age }    // 复杂数据类型属性

  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <ChildComp info={info} onClick={changeName}/>
    </div>
  );
}

使用 useMemo 对对象属性包一层解决这类问题。

function ParentComp () {
  // ....
  const [ name, setName ] = useState('hi~')
  const [ age, setAge ] = useState(20)
  const changeName = useCallback((newName) => setName(newName), [])
  const info = useMemo(() => ({ name, age }), [name, age])   // 包一层

  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <ChildComp info={info} onClick={changeName}/>
    </div>
  );
}

再次点击父组件按钮，控制台中不再打印子组件被渲染的信息了。

七、forwardRef

• useRef

可以用来引用 DOM 对象
也可以用来引用普通对象

很重要的一点就是他的 current 属性; useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

• forwardRef

props 无法传递 ref 属性; 实现 ref 的传递：由于 props 不包含 ref，所以需要 forwardRef

import React, {forwardRef, useRef} from 'react';

function App(){
    const buttonRef = useRef(null)
    return (
        <div>
            <Button ref={buttonRef}>按钮</Button2>
        </div>
    )
}
const Button = forwardRef((props, ref) => {
    console.log(ref)  //可以拿到ref对button的引用，forwardRef仅限于函数组件，class 组件是默认可以使用 ref 的
    return <button ref={ref} {...props} />;
})