React 学习笔记（16）：扩展知识点

1，setState 更新状态的2种写法

(1). setState(stateChange, [callback]) ------ 对象式的setState
    1.stateChange为状态改变对象(该对象可以体现出状态的更改)
    2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
               
(2). setState(updater, [callback]) ------ 函数式的setState
    1.updater为返回stateChange对象的函数。
    2.updater可以接收到state和props。
    3.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

总结:
    1.对象式的setState是函数式的setState的简写方式(语法糖)
    2.使用原则：
        (1).如果新状态不依赖于原状态 ===> 使用对象方式
        (2).如果新状态依赖于原状态 ===> 使用函数方式
        (3).如果需要在setState()执行后获取最新的状态数据,要在第二个callback函数中读取

2，lazyLoad 路由懒加载

懒加载的意思是用的时候再加载，有利于优化 react 项目的初始加载速度，写法如下：

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))
	
//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<h1>loading.....</h1>}>
  <Switch>
    <Route path="/xxx" component={Xxxx}/>
    <Redirect to="/login"/>
  </Switch>
</Suspense>

3，Hooks

3-1，React Hook/Hooks 是什么？

(1). Hook是React 16.8.0版本增加的新特性/新语法
(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

3-2，三个常用的 Hook

(1). State Hook: React.useState()
(2). Effect Hook: React.useEffect()
(3). Ref Hook: React.useRef()

3-3，State Hook

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)  
(3). useState()说明:
    参数: 第一次初始化指定的值在内部作缓存
    返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:
    setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
    setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

function Demo(){
	const [count,setCount] = React.useState(0)

	//加的回调
	function add(){
		//setCount(count+1) //第一种写法
		setCount(count => count+1 )
	}

	return (
		<div>
			<h2>当前求和为：{count}</h2>
			<button onClick={add}>点我+1</button>
		</div>
	)
}

3-4，Effect Hook

(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:
    发ajax请求数据获取
    设置订阅 / 启动定时器
    手动更改真实DOM
(3). 语法和说明: 
    useEffect(() => { 
        // 在此可以执行任何带副作用操作
        return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
        }
    }, [stateValue])
// [stateValue] 中指定的是想要监控的 state，当监控的 state 发生变更的时候，就会触发执行上面的回调函数。 
// 如果指定的是[],回调函数只会在第一次render()后执行
    
(4). 可以把 useEffect Hook 看做如下三个函数的组合
    componentDidMount()
    componentDidUpdate()
    componentWillUnmount() 

function Demo(){
	const [count,setCount] = React.useState(0)

	React.useEffect(()=>{
		let timer = setInterval(()=>{
			setCount(count => count+1 )
		},1000)
		return ()=>{
			clearInterval(timer)
		}
	},[])

	//卸载组件的函数调
	function unmount(){
		ReactDOM.unmountComponentAtNode(document.getElementById('root'))
	}

	return (
		<div>
			<h2>当前求和为：{count}</h2>
			<button onClick={unmount}>卸载组件</button>
		</div>
	)
}

3-5，Ref Hook

(1). Ref Hook 可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与 React.createRef() 一样

function Demo(){
	const myRef = React.useRef()

	//提示输入的回调
	function show(){
		alert(myRef.current.value)
	}

	return (
		<div>
			<input type="text" ref={myRef}/>
			<button onClick={show}>点我提示数据</button>
		</div>
	)
}

4，Fragment

使用：
<Fragment>
    <></>
    <></>
<Fragment>

作用：可以不用必须有一个真实的DOM根标签了

export default class Demo extends Component {
	render() {
		return (
			<Fragment key={1}>
				<input type="text"/>
				<input type="text"/>
			</Fragment>
		)
	}
}

5，Context

理解：一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

用法：

1) 创建Context容器对象：
	const XxxContext = React.createContext()  
	
2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
	<xxxContext.Provider value={数据}>
		子组件
    </xxxContext.Provider>
    
3) 后代组件读取数据：

	//第一种方式:仅适用于类组件 
	  static contextType = xxxContext  // 声明接收context
	  this.context // 读取context中的value数据
	  
	//第二种方式: 函数组件与类组件都可以
	  <xxxContext.Consumer>
	    {
	      value => ( // value就是context中的value数据
	        要显示的内容
	      )
	    }
	  </xxxContext.Consumer>

注意：在应用开发中一般不用context, 一般都它的封装react插件

//创建Context对象
const MyContext = React.createContext()
const {Provider,Consumer} = MyContext

export default class A extends Component {

	state = {username:'tom',age:18}

	render() {
		const {username,age} = this.state
		return (
			<div className="parent">
				<h3>我是A组件</h3>
				<h4>我的用户名是:{username}</h4>
				<Provider value={{username,age}}>
					<B/>
				</Provider>
			</div>
		)
	}
}

class B extends Component {
	render() {
		return (
			<div className="child">
				<h3>我是B组件</h3>
				<C/>
			</div>
		)
	}
}

// 类式组件
/* class C extends Component {
	//声明接收context
	static contextType = MyContext
	render() {
		const {username,age} = this.context
		return (
			<div className="grand">
				<h3>我是C组件</h3>
				<h4>我从A组件接收到的用户名:{username},年龄是{age}</h4>
			</div>
		)
	}
} */

// 函数式组件
function C(){
	return (
		<div className="grand">
			<h3>我是C组件</h3>
			<h4>我从A组件接收到的用户名:
			<Consumer>
				{value => `${value.username},年龄是${value.age}`}
			</Consumer>
			</h4>
		</div>
	)
}

6，组件优化

当前组件的两个问题：

1. 只要执行 setState()，即使不改变状态数据，组件也会重新 render()
2. 只当前组件重新 render()，就会自动重新 render 子组件，效率低

高效率的做法：只有当组件的 state 或 props 数据发生改变时才重新 render()

原因：Component 中的 shouldComponentUpdate() 总是返回 true

解决方案：

1. 重写 shouldComponentUpdate() 方法，比较新旧 state 或 props 数据，如果有变化才返回 true，如果没有返回 false。
2. 使用 PureComponent 组件，该组件重写了 shouldComponentUpdate()，只有 state 或 props 数据有变化才返回 true。

注意：只是进行 state 和 props 数据的浅比较，如果只是数据对象内部数据变了，返回 false，不要直接修改 state 数据，而是要产生新数据。

项目中一般使用 PureComponent 来优化。

自己重写 shouldComponentUpdate() 方法的代码示例：

shouldComponentUpdate(nextProps,nextState){
    // console.log(this.props,this.state); //目前的props和state
	// console.log(nextProps,nextState); //接下要变化的目标props，目标state
	return !this.state.carName === nextState.carName
}

shouldComponentUpdate(nextProps,nextState){
    console.log(this.props,this.state); //目前的props和state
	console.log(nextProps,nextState); //接下要变化的目标props，目标state
	return !this.props.carName === nextProps.carName
}

直接使用 PureComponent 组件：

export default class Parent extends PureComponent {}

class Child extends PureComponent {}

7，renderProps

如何向组件内部动态传入带内容的结构（标签）？

Vue 中：使用 slot 技术。

React 中有两种方式：

1. 使用 children props：通过组件标签体传入结构
2. 使用 render props：通过组件标签属性传入结构，一般用 render 函数属性

children props：

<A>
    <B>xxxx</B>
</A>
在 A 组件内部使用 { this.props.children } 获取 B 标签
问题: 如果B组件需要A组件内的数据, ==> 做不到 

render props：

export default class Parent extends Component {
  render() {
    return (
	  <div className="parent">
	    <h3>我是Parent组件</h3>
		<A render={(name)=><C 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>
	)
  }
}

class B extends Component {
  render() {
    console.log('B--render');
    return (
      <div className="b">
        <h3>我是B组件,{this.props.name}</h3>
	  </div>
    )
  }
}

8，ErrorBoundary

理解：用来捕获后代组件错误，渲染出备用页面

特点：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

使用方式：getDerivedStateFromError 配合 componentDidCatch

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>
		)
	}
}

export default class Child extends Component {
	state = {
		users:[
			{id:'001',name:'tom',age:18},
			{id:'002',name:'jack',age:19},
			{id:'003',name:'peiqi',age:20},
		]
		// users:'abc'
	}

	render() {
		return (
			<div>
				<h2>我是Child组件</h2>
				{
					this.state.users.map((userObj)=>{
						return <h4 key={userObj.id}>{userObj.name}----{userObj.age}</h4>
					})
				}
			</div>
		)
	}
}

9，组件间通信方式总结

组件间的关系：

• 父子组件
• 兄弟组件（非嵌套组件）
• 祖孙组件（跨级组件）

几种通信方式：

1. props：

        (1). children props

        (2). render props

2. 消息订阅-发布：

        pubs-sub、event 等等

3. 集中式管理：

        redux、dva 等等

4. context：

        生产者 - 消费者模式

比较好的搭配方式：

父子组件：props

兄弟组件：消息订阅 - 发布、集中式管理

祖孙组件（跨级组件）：消息订阅 - 发布、集中式管理、context（开发用的少，封装插件用的多）