React - zustnad 更轻量级的集中式状态管理工具1. 示例import { create } from 'zustand' const useStore = create((set) => { return { // 状态数据 count: 0, // 修改状态数据的方法 inc: () => { // 修改原数据 set((state) => ({ count: state.count + 1 })) // 直接修改 // set({ count: 100 }) } } }) function App() { const { count, inc } = useStore() return ( <div className="App"> <p>{count}</p> <button onClick={inc}>+ 1</button> </div> ) } export default App 2. 异步方法import { useEffect } from 'react' import { create } from 'zustand' const useStore = create((set) => { return { // 状态数据 count: 0, channelList: [], // 修改状态数据的方法 inc: () => { // 修改原数据 set((state) => ({ count: state.count + 1 })) // 直接修改 // set({ count: 100 }) }, getChannelList: async () => { const res = await fetch('http://geek.itheima.net/v1_0/channels') const resJson = await res.json() console.log(resJson) set({ channelList: resJson.data.channels }) } } }) function App() { const { count, inc, channelList, getChannelList } = useStore() useEffect(() => { getChannelList() }, [getChannelList]) return ( <div className="App"> <p>{count}</p> <button onClick={inc}>+ 1</button> <ul> {channelList.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ) } export default App 3. 切片模式当单个 store 较大时，可以用切片模式进行模块的拆分组合import { useEffect } from 'react' import { create } from 'zustand' const createCountStore = (set) => { return { count: 0, inc: () => { set((state) => ({ count: state.count + 1 })) } } } const createChannelStore = (set) => { return { channelList: [], getChannelList: async () => { const res = await fetch('http://geek.itheima.net/v1_0/channels') const resJson = await res.json() console.log(resJson) set({ channelList: resJson.data.channels }) } } } const useStore = create((...a) => { return { ...createCountStore(...a), ...createChannelStore(...a) } }) function App() { const { count, inc, channelList, getChannelList } = useStore() useEffect(() => { getChannelList() }, [getChannelList]) return ( <div className="App"> <p>{count}</p> <button onClick={inc}>+ 1</button> <ul> {channelList.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ) } export default App

React - 类组件 1. 概念通过 js 中的类来组织代码2. 实现方式（1）通过类属性 state 定义状态数据（2）通过 setState 方法修改状态数据（3）通过 render 函数返回要渲染的 UI3. 示例import { Component } from 'react' class Counter extends Component { state = { count: 0 } setCount = () => { this.setState({ count: this.state.count + 1 }) } render() { return <button onClick={this.setCount}>{this.state.count}</button> } } function App() { return ( <div className="App"> <Counter /> </div> ) } export default App 4. 生命周期函数示例（以 componentDidMount, componentWillUnmount 为例）：import { Component, useState } from 'react' class Son extends Component { // 组件渲染完毕执行一次 componentDidMount() { console.log('组件渲染完毕') this.timer = setInterval(() => { console.log('执行定时器') }, 1000) } // 组件卸载之后执行（常用于清除副作用） componentWillUnmount() { console.log('子组件被卸载') clearInterval(this.timer) } render() { return <div>Son Component</div> } } function App() { const [show, setShow] = useState(true) return ( <div className="App"> {show && <Son />} <button onClick={() => setShow(false)}>unmount son component</button> </div> ) } export default App 5. 组件通信概念：与常规的组件通信思路一致（父传子、子传父、兄弟组件间通信）（1）父传子import { Component } from 'react' class Parent extends Component { state = { msg: '父组件的数据' } render() { return ( <div> <p>Parent Component</p> <Son msg={this.state.msg} /> </div> ) } } class Son extends Component { render() { return ( <div> Son Component <p>{this.props.msg}</p> </div> ) } } function App() { return ( <div className="App"> <Parent /> </div> ) } export default App （2）子传父import { Component } from 'react' class Parent extends Component { state = { msg: '父组件的数据' } getSonMsg = (sonMsg) => { console.log('子组件传递的数据：', sonMsg) } render() { return ( <div> <p>Parent Component</p> <Son msg={this.state.msg} getSonMsg={this.getSonMsg} /> </div> ) } } class Son extends Component { render() { return ( <div> Son Component <p>{this.props.msg}</p> <button onClick={() => this.props.getSonMsg('孙笑川')}> 传递数据给父组件 </button> </div> ) } } function App() { return ( <div className="App"> <Parent /> </div> ) } export default App （3）兄弟组件通信import { Component } from 'react' class Parent extends Component { state = { msg: '父组件的数据', msg1: '' } setMsg1 = (val) => { this.setState({ msg1: val }) } getSonMsg = (sonMsg) => { console.log('子组件传递的数据：', sonMsg) } render() { return ( <div> <p>Parent Component</p> <hr /> <Son msg={this.state.msg} getSonMsg={this.getSonMsg} setMsg={this.setMsg1} /> <hr /> <Daughter msg={this.state.msg} brotherMsg={this.state.msg1} /> </div> ) } } class Son extends Component { render() { return ( <div> Son Component <p>{this.props.msg}</p> <button onClick={() => this.props.getSonMsg('孙笑川')}> 传递数据给父组件 </button> <br /> <button onClick={() => this.props.setMsg('药水哥')}> 传递数据给兄弟组件 </button> </div> ) } } class Daughter extends Component { render() { return ( <div> Daughter Component <p>父组件传递的数据：{this.props.msg}</p> <p>兄弟组件传递的数据：{this.props.brotherMsg}</p> </div> ) } } function App() { return ( <div className="App"> <Parent /> </div> ) } export default App

React - useImperativeHandle 作用：通过 ref 讲子组件的方法暴露给父组件import { forwardRef, useImperativeHandle, useRef } from 'react' const Son = forwardRef((props, ref) => { const inputRef = useRef(null) const inputHandle = () => { inputRef.current.focus() } useImperativeHandle(ref, () => { return { inputHandle } }) return <input type="text" ref={inputRef} /> }) function App() { const sonRef = useRef(null) const sonInputFocusHandle = () => { console.log(sonRef) sonRef.current.inputHandle() } return ( <div className="App"> <Son ref={sonRef} /> <button onClick={sonInputFocusHandle}>focus</button> </div> ) } export default App

React - forwardRef 作用：使用 ref 暴露组件给父节点import { forwardRef, useRef } from 'react' // function Son() { // return <input type="text" /> // } const Son = forwardRef((props, ref) => { return <input type="text" ref={ref} /> }) function App() { const sonRef = useRef(null) const sonInputFocus = () => { console.log(sonRef) sonRef.current.focus() } return ( <div className="App"> <Son ref={sonRef} /> <button onClick={sonInputFocus}>focus</button> </div> ) } export default App

React - useCallback 作用：在组件多次重新渲染时缓存函数import { memo, useCallback, useState } from 'react' const MemoInput = memo(function Input({ onChange }) { console.log('执行子组件重新渲染') return <input type="text" onChange={(e) => onChange(e.target.value)} /> }) function App() { const changeHandle = useCallback((val) => { console.log(val) }, []) const [count, setCount] = useState(0) return ( <div className="App"> <MemoInput onChange={changeHandle} /> <button onClick={() => setCount(count + 1)}>{count}</button> </div> ) } export default App

React - React.memo 作用：允许组件在 Props 没有改变的情况下跳过渲染注：React 组件渲染机制，只要父组件重新渲染，子组件也会重新渲染1. 示例import { memo, useState } from 'react' // function Son() { // console.log('执行子组件渲染') // return <div>Son Component</div> // } // props 发生变化时才重新渲染子组件 const MemoSon = memo(function Son() { console.log('执行子组件渲染') return <div>Son Component</div> }) function App() { const [count, setCount] = useState(0) return ( <div className="App"> count: {count} <button onClick={() => setCount(count + 1)}>count + 1</button> <MemoSon /> </div> ) } export default App 2. props 的比较机制在使用 memo 缓存组件后，React 会对每一个 prop 使用 Object.is 方法比较心值和旧值prop 是简单（基本）类型Object.is(1, 1) ---> true 无变化prop 是引用类型（对象/数组）Object.is([], []) ---> false 有变化（即：React 不关心内容，只关心引用是否发生变化）import { memo, useMemo, useState } from 'react' const MemoSon = memo(function Son({ count, list }) { console.log('执行子组件渲染') return <div>Son Component</div> }) function App() { const [count, setCount] = useState(0) const index = 100 const list = [1, 2, 3] // 保持引用稳定 const memoList = useMemo(() => { return [1, 2, 3] }, []) return ( <div className="App"> count: {count} <button onClick={() => setCount(count + 1)}>count + 1</button> {/* 子组件 prop 发生变化（count累加），执行重新渲染 */} {/* <MemoSon count={count} /> */} {/* 子组件 prop 无变化（传递的 count 是固定的），不执行重新渲染 */} {/* <MemoSon count={index} /> */} {/* count 累加变化时，父组件重新渲染，list 也会重新执行声明（即子组件 prop 参数的引用发生了变化，执行重新渲染） */} {/* <MemoSon list={list} /> */} {/* memo 保持引用稳定 */} <MemoSon list={memoList} /> </div> ) } export default App

React - useMemo 作用：在组件每次重新渲染的时候缓存计算的结果import { useMemo, useState } from 'react' function fib(n) { console.log('执行斐波那契计算函数') if (n < 3) { return 1 } return fib(n - 2) + fib(n - 1) } function App() { const [count1, setCount1] = useState(0) const [count2, setCount2] = useState(0) // 只有count1变化时，才重新执行斐波那契计算函数 // useMemo 在计算密集型场景使用 const result = useMemo(() => { return fib(count1) }, [count1]) console.log('组件执行重新渲染') return ( <div className="App"> count1: {count1} <button onClick={() => setCount1(count1 + 1)}>count1 + 1</button> count2: {count2} <button onClick={() => setCount2(count2 + 1)}>count2 + 1</button> result: {result} </div> ) } export default App

React - useReducer 作用：和 useState 类似，用于管理相对复杂的状态数据基础用法：定义 reducer 函数组件中调用 useReducer，并传入 reducer 函数和初始值通过 dispatch 函数分派一个 action 对象（通知 reducer 要返回哪个新状态并渲染 UI）import { useReducer } from 'react' function reducer(state, action) { switch (action.type) { case 'INC': return state + 1 case 'DEC': return state - 1 case 'SET': return action.payload default: return state } } function App() { const [state, dispatch] = useReducer(reducer, 0) return <div className="App">{state} <button onClick={() => {dispatch({type: 'INC'})}}>+</button> <button onClick={() => {dispatch({type: 'DEC'})}}>-</button> <button onClick={() => {dispatch({type: 'SET', payload: 100})}}>SET</button> </div> } export default App