1、setState
setState更新数据是异步的，如果想获取更新完的数据，需要通过第二个参数回调函数来获取
//对象式setState
add = ()=>{
const {count} = this.state
this.setState({count: count + 1}, ()=>{
console.log(this.state.count)
})
} //函数式setState()
add = ()=>{
const {count} = this.state
this.setState((state,props)=>{
console.log(state,props)
return {count:state.count+1}
})
}2、lazyLoad，用的时候再调用，不会预先调用，需要用suspence包裹注册路由
import React, { Component,lazy,Suspense} from 'react'
import {NavLink,Route} from 'react-router-dom'
// import Home from './Home'
// import About from './About'
import Loading from './Loading'
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))
<Suspense fallback={<Loading/>}>
{/* 注册路由 */}
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
</Suspense>3、stateHook
userState
函数组件中使用state，通过调用React.useState()使用，该数组两个变量，第一个存储状态值，第二个存储改变状态的方法，通过解构赋值取出来即可
//设置state初始值，并获取调用函数
const [count,setCount] = React.useState(0)
function add(){
//setCount(count+1) //第一种写法
setCount(count => count+1 )
}
userEffect，监听函数
React.userEffect(,[])第二个参数是检测对象，如果监测空数组，则相当于类式组件中的componentDidMount，只在加载的时候调用，其可以检测数值的变化，所以也可以当componentDidUpdate使用
userEffect的第一个参数可以写一个返回函数，其返回函数相当于componentWillUnmount
React.useEffect(()=>{
let timer = setInterval(()=>{
setCount(count => count+1 )
},1000)
return ()=>{
clearInterval(timer)
}
},[])可以把 useEffect Hook 看做如下三个函数的组合
componentDidMount()
componentDidUpdate()
componentWillUnmount()
RefHook
(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样
const myRef = React.useRef()
//提示输入的回调
function show(){
alert(myRef.current.value)
}
<input type="text" ref={myRef}/>
<button onClick={show}>点我提示数据</button>
Fragment
<Fragment>可以取代无效的<div>标签，编译的时候会自动丢失忽略，不再渲染真实DOM
Context，组件间通信方式，常用于祖组件 和 后代组件间的通信
//1、创建Context对象
const MyContext = React.createContext()
const {Provider,Consumer} = MyContext
//传递
<Provider value={{username,age}}>
<B/>
</Provider>
//类式组件声明接收context
static contextType = MyContext
const {username,age} = this.context
//函数式组件与类式组件都可以接受的方式
<Consumer>
{value => `${value.username},年龄是${value.age}`}
</Consumer>
PureComponent
Component的2个问题
> 1. 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低
>
> 2. 只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低
### 效率高的做法
> 只有当组件的state或props数据发生改变时才重新render()
### 原因
> Component中的shouldComponentUpdate()总是返回true
改进措施：
使用PureComponent取代Component，但是push等操作的时候会出现问题，不建议使用
注意:
只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false
不要直接修改state数据, 而是要产生新数据
renderProps插槽技术
export default class Parent extends Component {
render() {
return (
<div className="parent">
<h3>我是Parent组件</h3>
<A render={(name)=><B name={name}/>}/>
</div>
)
}
}
class A extends Component {
state = {name:'tom'}
render() {
console.log(this.props);
const {name} = this.state
return (
<div className="a">
<h3>我是A组件</h3>
{this.props.render(name)}
</div>
)
}
}ErrorBoundary
只适用于生产环境，测试环境还是会报错 getDerivedStateFromError
#### 理解：
错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面
#### 特点：
只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
##### 使用方式：
getDerivedStateFromError（捕获后代组件生命周期产生的错误）配合componentDidCatch（捕获页面报错）文章来源：https://www.toymoban.com/news/detail-475948.html
import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
state = {
hasError:'' //用于标识子组件是否产生错误
}
//当Parent的子组件出现报错时候，会触发getDerivedStateFromError调用，并携带错误信息
static getDerivedStateFromError(error){
console.log('@@@',error);
return {hasError:error}
}
componentDidCatch(){
console.log('此处统计错误，反馈给服务器，用于通知编码人员进行bug的解决');
}
render() {
return (
<div>
<h2>我是Parent组件</h2>
{this.state.hasError ? <h2>当前网络不稳定，稍后再试</h2> : <Child/>}
</div>
)
}
}
componentDidCatch() 方法只适用于 class 组件，函数组件可以使用 ErrorBoundary 来实现相似的功能。文章来源地址https://www.toymoban.com/news/detail-475948.html
到了这里，关于React学习8 hooks的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
