react hooks的使用

1.useState

注: 只能找函数最外层调用hook，不要在循环、判断、子函数中调用useState

const Demo = () => {
	// 参数：初始化值(不设置默认为undefined) 
	const [age, setAge] = useState(10) 
	// setAge 参数：传入一个新值或函数
	// 		  setAge执行后组件会重新渲染(重新调用Demo函数), 根据新的值返回DOM结构	
	//		  注:引用数据类型需要做浅拷贝才会更新 
	function handleClick() {
		setAge(age + 10)
		setAge(age + 10) 
		setAge(age + 10)
		// 函数执行完毕后 会将上述3个函数合并只执行一次 返回20
	
		setAge((prevAge) => prevAge + 10)
		setAge((prevAge) => prevAge + 10)
		setAge((prevAge) => prevAge + 10)
		// 传入回调函数, 可以获取到上次执行结束后的返回值 得到最新的值  返回40
	}
	setAge(10)

	return (
		<div> {age} </div>
		<button onClick={handleClick}>修改</button>
	)
}

2.useEffect

相当于componentDidMount和componentDidUpdate的结合体(默认函数首次执行和数据更新都会触发)

const Demo = () => { 
	useEffect(() => {
		setInterval(() => {

		},1000)
		return () => {
			// componentWillUnmount生命周期
		}
	},[]) // 1.不传第二个参数, 只要数据更新就会再次触发, 监测全部变量
		  // 2.传入空数组, 只会触发一次, 不监测任何变量
		  // 3.数组传入依赖变量, 只有首次触发或者数组内依赖的变量发生改变才会触发。
}

3.useContext

// 1.创建容器对象
export const UserContext = React.createContext()
// 2.渲染子组件时, 外面包裹xxContext.Provider, 通过value属性给后代组件传递数据
const obj = { usermae: 123, age: 18 }
<UserContext.Provider value={obj}>
   <Child>后代组件</Child>
</ UserContext.Provider>
// 3.使用
import { MyContext } from 'xxxx'
const user = useContext(UserContext)
console.log(user) // value传递多数据。减少了层级的嵌套

4.useReducer

// state读取传入的reducer内容, dispatch派发请求
const [state, dispatch] = useReducer(reduer, {})
// 第三个参数：传入一个函数 返回值也可以做为初始值 参数为第二个参数
const [state, dispatch] = useReducer(reduer, undefined, reducer) 
// state.xxxx 读取属性
// dispatch({ type: 'SET_COUNT', payload: 18 })

useReducer 和 redux 的区别

1. useReducer 是 useState的代替方案，用于 state 复杂变化
2. useReducer 是单个组件状态管理，组件通讯还需要 props
3. redux 是全局状态管理，多组件共享数据
4. 可结合useContext实现redux的效果

5. useCallback

1. useCallback会返回一个函数memoized (记忆的) 值
2. 在依赖不变的情况下, 多次定义的时候, 返回的值是相同的
   目的：当父组件重新render时, 父组件内的函数会被重新定义生成新的地址值, 子组件内pros接收的父组件方法引用发生变化也会重新渲染, 造成不必要的更新

const Demo = ()=> {
	const handleClick = useCallback(() => {
		doSomething(name)			
	}, [age, name])
	return ()
}

6. useMemo

在这里插入代码片

react引入插件进行跨组件通信，安装依赖包 npm i events

import { EventEmitter } from 'events'
const eventBus = new EventEmitter()
// 挂载阶段
eventBus.addListener(事件名，回调函数)
// 卸载阶段
removeListener(事件名，回调函数)
// 根据需求触发
emit(事件名，参数)
// 回调函数接受emit的参数，回调函数在被触发的组件中定义