React--hooks--useState的使用 和 常见问题

Hook的简介

Hook简单点说就是：（让函数组件具备类组件的功能）
1.只能在函数组件内使用
2.使得组件复用变得更加简单
3.抛开了class繁杂的生命周期，以及this的指向问题

---

一、useState的使用

1.定义useState

// 由于useState的返回值是数组
// 所以数组解构出来的第一个参数是 状态，第二个参数是 改变状态的方法
// initialState可以是任意js类型或对象，也可以是一个函数用于惰性初始化
const [state, setState] = useState(initialState);

2.使用useState

function App() {
// 当我们的initialState为数值时，我们可以在setCount直接加减
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>Count is: {count}</p>
      <button onClick={() => { setCount(count + 1); }}>increment</button>
      <button onClick={() => { setCount(count - 1); }}>decrement</button>
    </div>
  )
}

当 initialState 为一个对象时：（我们如果只需要改变state中的某一个属性，那么我们就可以用 …state 来表示其他不变的属性，这样的话在更新状态时就不会把不变的状态忽略，从而重新渲染时少了别的属性）

function App() {
    const [state, setState] = useState({
        name: '',
        age: 0
    }) 
    // ...state表示其他不改变的状态
    return (
        <div>
            <p>name is: {state.name}</p>
            <p>age is: {state.age}</p>
            <button onClick={() => { setState({...state, name: "mikasa"}) }}>increment</button>
            <button onClick={() => { setState({...state, age: 16}) }}>decrement</button>
        </div>
    )
}

---

二、useState的惰性初始化

因为 initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props); // 做复杂运算 
  // const initialState = 365*60*60
  return initialState;
});

---

三、useState的原理的简单实现

1.内部会使用派发机制（每次使用useState都是不同的，独立的）

2.每次渲染都有独立的闭包
=>每次渲染都有自己的props和state
=>每次渲染都有自己的事件处理函数

// 当我们使用这段代码时，只能用一次，而useState的派发机制就相当于，每创建一个useState，就相当于创建了下面这一段代码
// 所以每个useState的状态都是独立的，不受其他useState的干扰
let lastState // 储存上一次的状态
function useState(initialState){
  lastState = lastState || initialState
  function setState(newState){
    if(typeof newState === "function"){
      // 如果是一个函数则执行这个函数
      var result = newState(lastState)
      lastState = result
    }else{
      // 状态更新
      lastState = newState
    }
    // 重新渲染
    render()
  }
  return [lastState, setState]
}

---

四、使用 useState 要注意的问题

1. useState里数据务必为immutable （不可赋值的对象）
2. 有些时候，我们使用 useState 时，通过第二个参数改变了第一个参数之后，它没有触发更新并重复渲染
   原因：
   （1）当我们传入的值为 引用类型 时，更新时必须传入一个新的引用类型地址，否则无法触发更新
   当我们传入的值为：数值 或 字符串 时，改变时都可以直接触发更新
   当我们传入的值为：数组 或 对象 等引用类型时，改变时都必须传入一个新的引用地址, 而且必须传入一个完整的结构，不仅仅只是改变的那一部分。

不触发渲染：

const [lists, setLists] =useState([]); // hooks实现todolist中遇到的问题
         .....
const arr = lists;  
arr.splice(index,1)  //根据删除index下标的这一项
setLists(arr);  // 不触发渲染
// setLists([arr]);  // 不触发渲染

解决方案：

const [lists, setLists] =useState([]);
         .....
const arr = lists;  
arr.splice(index,1)  //根据删除index下标的这一项
setLists([...arr]);  //重复赋值时改变数组的地址，触发渲染

或

const [lists,setLists] =useState([]);
         .....
const arr = [...lists];  //克隆的时候改变地址
arr.splice(index,1)
setLists(arr);

（2）useState异步回调的问题
当使用usestate对数据进行更新，并不能立刻获取到最新的数据。（和class里面的setState相似）

  const [name, setName] = useState('mikasa');
  const handleTest = () => {
    console.log(name) // mikasa
    setName('aron')
    console.log(name) // mikasa
  }

如果要对状态更新执行操作，则需要使用useEffect钩子，就像componentDidUpdate在类组件中使用一样，因为useState返回的setter没有回调模式

  const [name, setName] = useState('mikasa');
  const handleTest = () => {
    console.log(name) // mikasa
    setName('aron')
    console.log(name) // mikasa
  
  useEffect(() => {
    console.log(name) //aron
  },[name])