React学习8 hooks及扩展

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（捕获页面报错）

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 来实现相似的功能。