【Sui】前端共学React学习笔记（3）

请关注 sui 前端共学营及其社区，在这里你可以学到前端和 move 合约语言的知识。-

useReducer

这里先给出一个简单的对count进行加减的功能

import { useState } from'react';
function App() {
  const [count, setCount] = useState(0);
  const handleIncrement = () => { setCount(count + 1); };
  const handleDecrement = () => { setCount(count - 1); };
  return (
    <div>
      <button onClick={handleDecrement}>-</button>
      <span>{count}</span>
      <button onClick={handleIncrement}>+</button>
    </div>
  );
}
export default App;

我们可以看到这里的功能非常单一，只有加和减，如果我们希望对数据的更改方式可能是更加多样的，比如乘和除的话就不方便对数据做统一的管理。现在我们可以使用reducer使你的代码规范整洁。 定义一个函数countReducer它接受state和action两个参数。state表示当前reducer函数要管理的那个状态，第二个action表示你要对状态进行什么样的操作。下面通过switch来判断action的属性type来进行相应操作，除了原先的操作还可以使用其他方式比如我这里地抛出异常。 实际使用它就能把useState删除了换成useReducer，这边有两参数。第一个就是刚刚设置的reducer函数countReducer，第二个代表默认值这里设为0。useReducer的返回值与useState较为相似返回一个数组，第一个元素是他的当前状态值state，第二个是进行状态修改的触发器dispatch。 接下来就可以直接触发器dispatch来进行相关操作后面带上参数type。

import { useReducer, useState } from'react';

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

function App() {
  const [state, dispatch] = useReducer(countReducer, 0)
  const handleIncrement = () => dispatch({ type: 'increment' });
  const handleDecrement = () => dispatch({ type: 'decrement' });
  return (
    <div>
      <button onClick={handleDecrement}>-</button>
      <span>{state}</span>
      <button onClick={handleIncrement}>+</button>
    </div>
  );
}
export default App;

useRef

现在我们有一个计数器点击加号就会加一，如果我们要记忆上个数值的话就可以使用useRef来进行创建数据存储的容器。 这个上一次的值prevCount有几个特点，它的值可以手动修改但并不是一个相应是状态并且不会随着组件的更新而进行重新的更新。 还有它的值进行设定是并不是给值本身做设置，而是通过调用useRef返回一个包含current属性的对象，所以操作是给current来做一个值的设定。

function App() {
  const [count, setCount] = useState(0);
  const prevCount = useRef(count);

  function handleClick() {
    prevCount.current = count;
    setCount(count + 1);
  }

  return (
    <div>
      <p>最新count：{count}</p>
      <p>上一次count：{prevCount.current}</p>
      <button onClick={handleClick}>+</button>
    </div>
  );
}

我们在使用useRef除了可以引用之前的状态值外话可以来引用页面中的标签。 子默认不对外开放内部功能，如果我们希望设置一个方法能被父组件使用的话，就需要一下特殊处理，首先子组件不能直接定义为一个普通函数，而是要通过const的函数表达方式来做定义，并且要通过React的方法forwardRef来处理这样才可以被父组件使用，这时我们的子组件还需要接受我们外部的ref。

const Child = forwardRef(function(props， ref) {
  return (
    <div>子组件</div>
  )
})

function App() {
  const childrRef = useRef(); 
  function handleClick() {

  }

  return (
    <div>
      <Child ref={childrRef}/>
      <button onClick={handleClick}>按钮</button>
    </div>
  );
}