React扩展使用
setState更新状态的两种写法
对象式的setState
setState(stateChange, [callback])
- stateChange为状态改变对象(该对象可以体现出状态的更改)
- callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
函数式的setState
setState(updater, [callback])
- updater为返回stateChange对象的函数
- updater可以接收到state和props
- callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用
总结：对象式的setState是函数式setState的简写方式
使用原则：
- 如果新状态不依赖于原状态---使用对象方式
- 如果新状态依赖于原状态---使用函数方式
- 如果需要在setState()执行后获取最新的状态数据, 要在callback函数中读取
路由懒加载
- 首先需要引入两个模块
import React, { lazy, Suspense } from 'react';- 路由的懒加载引入
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));- 注册路由
<!--通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面-->
<Suspense fallback={<h1>加载中。。。。</h1>}>
<Route path='/about' component={About} />
<Route path='/home' component={Home} />
</Suspense>HOOKS
hooks使得我们可以在函数式组件中使用state和其他的react的特性
这里我们先了解三个基础常用的hooks
useState
function HooksDemo() {
const [count, setCount] = React.useState(0);
function add() {
//第一种写法setCount(count+1);
setCount(count => count + 1)
}
//...
}State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
语法: const [xxx, setXxx] = React.useState(initValue)
useState唯一的参数就是初始state，上述列子我们给count设置的初始值就为0
返回值（这里数组解构）包含两个元素，第一个为内部当前状态值，第二个为更新状态的函数
setXxx函数的两种写法：
- setXxx(newValue) 参数为非函数值直接指定新的状态值，内部用其覆盖原来的状态值
- setXxx(value => newVaule) 参数为函数，接收原来的值返回新的状态值，内部用其覆盖原来的状态
useEffect
React.useEffect(()=>{
let timer = setInterval(()=>{
setCount(count => count+1 )
},1000)
return ()=>{
clearInterval(timer)
}
},[])Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
react常见的副作用操作，发ajax请求数据获取，设置订阅 / 启动定时器，手动更改真实DOM
在effect函数体中我们可以写一任何副作用操作，在函数返回体中我们可以写一些收尾的操作，比如清除定时器，取消订阅
我们可以把userEffect这个钩子看成三个生命周期函数的组成
componentDidMount()
componentDidUpdate()
componentWillUnmount()默认情况下，useEffect在第一次渲染之后和每次更新之后都会执行。我们为其添加的第二个参数 [], 如果就写一个空数组这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行，向数组中写一个变量，这里如果添加了 count 当count值发生变化时就会执行useEffect
useRef
Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
语法: const refContainer = useRef()
作用:保存标签对象,功能与React.createRef()一样
Fragment
react中所有的标签都必须拥有一个根标签包裹，如果没有就会报错，但有时这个根标签是多余的，并且在最终渲染的时候也会渲染到真实dom中，这里我们可以使用i个标签来代替这个根标签
import React, { Component, Fragment } from 'react'
export default class FragmentDemo extends Component {
render() {
return (
<Fragment>
<div>hahaha</div>
<div>呵呵呵</div>
</Fragment>
)
}
}这个标签最终不会再页面出现，类似于小程序的block标签
context
一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信
使用方式
首先创建context容器对象
const XxxContext = React.createContext()渲染子组件的时候外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据
<xxxContext.Provider value={数据}> 子组件 </xxxContext.Provider>后代组件读取数据
//第一种方式:仅适用于类组件 static contextType = xxxContext // 声明接收context this.context // 读取context中的value数据 //第二种方式: 函数组件与类组件都可以 <xxxContext.Consumer> { value => ( // value就是context中的value数据 要显示的内容 ) } </xxxContext.Consumer>一般在开发中不适用context，都用其来封装插件
PureComponent
react的Component的两个问题
- 只要执行setState(),即使不改变状态数据, 组件也会重新render()
- 只要当前父组件重新render(), 就会自动重新render子组件 ==> 效率低
所以我们希望只有当组件的state或props数据发生改变时才重新render()
思路： Component中的shouldComponentUpdate()返回true才会更新组件
办法1:
重写shouldComponentUpdate()方法比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:
使用PureComponent PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
import React, { PureComponent, Component } from 'react'
//PureComponent用于重写shouldComponentUpdate，要是state状态不变还有props不变的话就不更新组件
export default class OptimizeDemo extends PureComponent {
state = { carName: '奔驰' }
changeCar = () => {
this.setState({ carName: '哈哈' })
}
/* shouldComponentUpdate(nextProps, nextState) {
console.log(nextProps, nextState);
console.log(this.props, this.state);
if (this.state.carName === nextState.carName) {
return false;
}
return true;
} */
render() {
console.log('父组件更新了');
return (
<div>
<h2>我是父组件：{this.state.carName}</h2>
<button onClick={this.changeCar}>点我</button>
<Child carName="jishi" />
</div>
)
}
}
class Child extends PureComponent {
/* shouldComponentUpdate(nextProps) {
if (this.props.carName === nextProps.carName) {
return false;
}
return true;
} */
render() {
console.log('子组件更新了');
return (
<div>
<h3>我是子组件:{this.props.carName}</h3>
</div>
)
}
}
注意:
只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false 不要直接修改state数据, 而是要产生新数据
render props
向组件内部动态传入带内容的结构(标签)，类似于vue中的slot
React中:
使用children props: 通过组件标签体传入结构
使用render props: 通过组件标签属性传入结构, 一般用render函数属性
//children props
<A>
<B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到
//render props
<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data} errorBoundary
错误边界：用来捕获后代组件错误，渲染出备用页面
特点：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
使用方式：getDerivedStateFromError配合componentDidCatch
// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
console.log(error);
// 在render之前触发
// 返回新的state
return {
hasError: true,
};
}
componentDidCatch(error, info) {
// 统计页面的错误。发送请求发送到后台去
console.log(error, info);
}这个错误边界在开发环境好像体现不出来，只有在生产环境才生效