hook-useState

示例代码

import React ,{useState} from "react"

function Example(props){
    const [count,setCount]=useState(0)
    const [friut,setFriut]=useState("apple")
    const [name,setName]=useState(props.name)
    // 当你需要在组件里面添加state，就可以使用hook了
    // 1. 这里只是执行了初始化的state,如果props发生变化怎么操作。。
    
    let handelSetCount=function(){
        setCount(count+1)
    }

    //click之类的事件就可以这样写。 
    return (
        <>
            <p>You click {count} times</p>
            <button onClick={handelSetCount}>
                click me
            </button>
            <button onClick={()=>setFriut("banana")}>
                click me{friut}
            </button>
            <button onClick={()=>setName("nb")}>
                click me{name}-{props.name}
            </button>

        </>
    )
}
export default Example

注意

1 .setState 和上次相同的值，是不会触发组件渲染的
2 .useState 只会在初始化代码的时候执行一次,并不是每次渲染组件都会执行
3 .多个useState的情况

1 .设置多个useState的时候，每个添加的时候都是添加到一个数组里面
2 .删除和添加一个新的useState都是相当于对一个数组操作
3 .如果在运行时添加，减少，修改，if操作的话，那些顺序就会乱，所以是不能使用if的

4 .useState不会把新的state和旧的state进行合并，而是直接替换
5 .每次渲染都是独立的闭包

1 .每一次渲染都有自己的props和state
2 .每一次渲染都有自己的事件处理函数
3 .当点击更新状态的时候，函数组件都会重新被调用，那么每次渲染都是独立的，取到的值不会受后面操作的影响
function Counter2(){
  let [number,setNumber] = useState(0);
  function alertNumber(){
    setTimeout(()=>{
      // alert 只能获取到点击按钮时的那个状态
      alert(number);
    },3000);
  }
  return (
      <>
          <p>{number}</p>
          <button onClick={()=>setNumber(number+1)}>+</button>
          <button onClick={alertNumber}>alertNumber</button>
      </>
  )
}

//这个例子也可以用在这里

6 .函数式更新：如果新的state需要通过使用之前的state计算出，那么可以讲回调函数当作参数传递给setState,该回调函数接受之前的state,并返回一个更新后的值
7 .惰性初始化state

1 .initState 参数只会在组件初始化的渲染中起作用，后续渲染时会被忽略
2 .如果初始state需要通过复杂的计算获取，那么可以传入一个函数，在计算中返回初始值，这个函数只会在初始渲染的时候被调用
function Example(props){
    function initState(){
        return props.count
    }
    // 这个函数只会在初始渲染的时候执行一次，后续重新渲染组件时，该函数就不会再被调用

    let [count,setCount]=useState(initState)
    return (
        <>
           <p>{count}</p>
           <button onClick={()=>setCount(count+10)}>+</button>
           <button onClick={()=>setCount(10)}>setCounter</button>
        </>
    )
}

export default Example

性能优化

1 .Hook内部使用Object.is来比较新旧state是否相等
2 .和组件中的setState方法不同，如果你修改状态的时候，传的值没有发生变化，是不会重新渲染的
3 .setState不会自动合并更新对象，，只能自己写函数式的setState来实现，他走的是直接替换的操作

减少渲染次数

1 .默认情况：只要父组件状态变化了，子组件也会重新渲染
2 .一般优化：类组件，使用pureComponent 函数组件：使用react.memo,将函数组件传递给memo之后，就会返回一个新的组件，新组件的功能，如果接受的属性不变，就不会重新渲染函数
3 .在setState里面

1 .使用useState，每次更新都是独立的，也就是说每次更新都会生成一个新的值，即使使用了react.memo，也还是会重新渲染
2 .useMemo:组件内部进行优化，创建函数和依赖项作为参数传入useMemo,他仅会在某个依赖项改变的时候才重新计算memoized值，有助于避免每次渲染都进行高开销的计算
3 .useCallback:接收一个内联回调函数参数和一个依赖项数组，子组件依赖父组件的状态，useCallback会返回改回调函数的memoized版本，改回调函数仅会在某个依赖项改变时才会更新

设置state的两种方式

1 .setCount(c=>c+1) 函数传参的方式，c 此时是之前的count，返回的值替代count
2 .setCount(100) 直接传入一个新值 ，代替count