React - 类组件 setState 的 2 种写法、LazyLoad、useState

一、类组件 setState 的 2 种写法1、对象式 setStatesetState(stateChange,[callback])stateChange 为状态改变对象该对象可以体现出状态的更改callback 是可选的回调函数它在状态更新完毕、界面也更新后render 函数调用后才被调用this.setState({count:this.state.count1,});this.setState({count:this.state.count1,},(){console.log(更新后的 count,this.state.count);},);2、函数式 setStatesetState(updater,[callback])updater 为返回 stateChange 对象的函数updater 可以接收到 prevState 和 props 参数callback 是可选的回调函数它在状态更新完毕、界面也更新后render 函数调用后才被调用this.setState((prevState,props)({count:prevState.count1,}));this.setState((prevState,props)({count:prevState.count1,}),(){console.log(更新后的 count,this.state.count);},);3、注意事项如果新状态不依赖于原状态使用对象式 setState如果新状态依赖于原状态使用函数式 setState// 最终 count 为 1两次都基于旧的 this.state.count 计算 import { Component } from react; export default class App extends Component { state { count: 0, }; add () { this.setState({ count: this.state.count 1, }); this.setState({ count: this.state.count 1, }); }; render() { return ( div h3{this.state.count}/h3 button onClick{this.add}Add/button /div ); } }// 最终 count 为 2每次都基于上次的 this.state.count 计算 import { Component } from react; export default class App extends Component { state { count: 0, }; add () { this.setState((prevState, props) ({ count: prevState.count 1, })); this.setState((prevState, props) ({ count: prevState.count 1, })); }; render() { return ( div h3{this.state.count}/h3 button onClick{this.add}Add/button /div ); } }如果需要在 setState 执行后获取最新的状态数据, 要在 callback 中读取this.setState({ count: this.state.count 1, }); console.log(this.state.count); // 输出结果为 0add () { this.setState((prevState, props) ({ count: prevState.count 1, })); console.log(this.state.count); // 输出结果为 0 };二、LazyLoad1、基本介绍通过 lazy 函数配合 import 函数动态加载路由组件路由组件代码会被分开打包通过Suspense指定在加载得到路由打包文件前显示一个自定义加载界面2、演示1pageAbout 页面import { Component } from react; export default class About extends Component { render() { return h2About/h2; } }Home 页面import { Component } from react; export default class Home extends Component { render() { return h2Home/h2; } }Loading 页面import { Component } from react; export default class Loading extends Component { render() { return ( div h1 style{{ backgroundColor: gray, color: orange }}Loading.../h1 /div ); } }2mainApp 组件import { Component, lazy, Suspense } from react; import { NavLink, Route } from react-router-dom; import Loading from ./pages/Loading; import ./App.css; const Home lazy(() import(./pages/Home)); const About lazy(() import(./pages/About)); export default class App extends Component { render() { return ( div div NavLink to/aboutAbout/NavLink NavLink to/homeHome/NavLink /div div Suspense fallback{Loading /} Route path/about component{About} / Route path/home component{Home} / /Suspense /div /div ); } }.active{color:red;}index.jsimportReactDOMfromreact-dom;import{BrowserRouter}fromreact-router-dom;importAppfrom./App;ReactDOM.render(BrowserRouterApp//BrowserRouter,document.getElementById(root),);3、打包影响使用 LazyLoad 后的打包不使用 LazyLoad 后的打包三、useState1、基本介绍useState 让函数式组件也可以有 state并进行 state 数据的读写操作const[xxx,setXxx]useState(initValue)initValue第一次初始化指定的值在内部作缓存[xxx, setXxx]包含 2 个元素的数组第 1 个为内部当前状态值第 2 个为更新状态值的函数setXxx的 2 种写法setXxx(newValue)参数为非函数值直接指定新的状态值内部用其覆盖原来的状态值setXxx(value newValue)参数为函数接收原本的状态值返回新的状态值内部用其覆盖原来的状态值2、基本使用import { useState } from react; export default function App() { const [count, setCount] useState(0); const add () { setCount(count 1); }; return ( div h3{count}/h3 button onClick{add}Add/button /div ); }3、注意事项如果新状态不依赖于原状态setXxx使用参数为非函数值如果新状态依赖于原状态setXxx使用参数为函数// 最终 count 为 1两次都基于旧的 count 计算 import { useState } from react; export default function App() { const [count, setCount] useState(0); const add () { setCount(count 1); setCount(count 1); }; return ( div h3{count}/h3 button onClick{add}Add/button /div ); }// 最终 count 为 2每次都基于上次的 count 计算 import { useState } from react; export default function App() { const [count, setCount] useState(0); const add () { setCount((prevCount) prevCount 1); setCount((prevCount) prevCount 1); }; return ( div h3{count}/h3 button onClick{add}Add/button /div ); }