【web】React-hooks

一、Hooks

为什么要使用react-hooks

1. 高阶组件为了复用，导致代码层级复杂;
2. 生命周期的复杂 ;
3. 写成function组件，无状态组件，但是又需要状态，改成class组件成本太高 不存在声明周期 。

常用

useState：创建状态

import React, {useState} from 'react' 
export default function Test() {
  const [name,setname]=useState('leo);
return(
       <div>
            {name}
            <button onClick={() => {
                setname('lee');
            }}>ddd</button>
	  </div>
	)
}

useEffect:副作用（监听某个依赖是否发生改变，从而实现另外的目的）

const [name,setname]=useState('leo');
// 副作用处理 
useEffect(() => {
    //如果在这里对name做了修改，那么数组中必须指明对应的依赖(依赖指状态)
    setname(name.toUpperCase()); 
    return () => {
        console.log('在这里组件被销毁')
    },[name]);
// 第二个参数如果是空数组那么第一个参数只走一次
// 如果[name]name作为依赖存在
//只要被修改，第一个参数就会走一次
// 在这里可以看做是对状态数据的再次加工处理 

useCallBack：对函数进行缓存，提升性能（并不能太大提升性能，最大的作用是防止子组件reRender()）

import React,{useState,useCallback}from 'react'
export default function Test1(){ 
    const [val,setval]=useState('');
    const [list,setlist]=useState([]); 
    const addltem=useCallback(()=> { 
        console.log(val); 
        setlist(...list, vall)},[val]) 
    return(
        <div>
        	<input defaultValue={val}
               onChange={(e) => { 
               setval(e.target.value);
               }} />
            <p>{val}</p>
            { 
                list.map((n, index) => <p key={'item'+index}>{index}-{n}</p>) 
			}
            <button onClick=(()=>{ 
                additem(); 
            }}>点我</button> 
            </div>
		)
     }

const[name,setname]=useState('lee')
const myFn=useCallBack(() => {
  console.log(name);
},[nmae])
// 只有name改变，函数才会重新生成一次 
// 如果传入空数组，函数首次执行生成，之后不变 
// 如果不传数组，每次都会生成新的函数

useMemo：对状态值属性值进行再次计算

const getResult = useMemo(() => list.mpa(n => n**2),[list])

useRef():懂得都懂

useContext()：参考类组件context状态树，写法上更简洁

import React,{useReducer} from 'react// 处理函数
const reducer=(prevState,action)=> { 
let state={.….prevState); 
//prevState 只读 
switch(action.key){ 
    case 'key1':
		代码1; 
		break; 
	case 'key2'
		代码2; 
		break: 
	default: 
	break:
return state;//外部对象
const intailState ={ count: 0 }

useReducer()

// dispatch: 发送信号执行外部的reducer方法
const [state, dispatch] = useReducer(reducer, intailState);
<button onClick={() => {
dispatch({ 
	type: 'key1'
	}）
}}

useReducer+useContext：解决大量组件传值问题

自定义hooks

• 必须以“use”开头
• 当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中
• 再解释:将复杂代码封装到函数中

小结

为什么要用？解决了什么问题：完善函数组件能力

如何模拟生命周期

• compontenDidMount , useEffect依赖[]
• compontenDidUpdate , useEffect无依赖或者依赖[a,b]
• compontenWillUnmonunt ,useEffect返回一个函数