react扩展方法 setState lazyLoad Hook Fragment Context Component render props 错误边界 组件通信方式总结

1,setState

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函数中读取

lazyLoad

	路由的懒加载
	为了实现路由懒加载 loading正常加载 其余路由懒加载 点的时候才加载

Hooks

Fragment

	等同于vue里的template标签 页面渲染的时候不做解析 直接删除掉这些标签了  所以 也不要在标签上加属性(没用了 已经被删了)

Context

	一种组件间通信方式(常用于祖组件与后代组件间的通信)
	最后不用context  基本都用react-redux我觉得是比较局限 因为不能修改 只能引用

Component(组件render问题)

	component的2个问题
		1,只要执行setState(),即使不改变状态数据,组件也会重新render()--->效率低
		2.只当前组件重新render(),就会自动重新render子组件,纵使子组件没有用到父组件的任何数据--->效率低
	效率高的做法
		:只有当组件state活props的数据发生改变时才重新render()
	原因:
		Component中shouldComponentUpdate()默认总返回true

render props

如何向组件内部动态传入带内容的结构(标签)?
和vue的插槽技术一样.组件之间来回灵活嵌套 并且可以传参.

错误边界

写在父组件里面 将子组件的错误拦截下来 不会让整个页面崩溃
不过 只适用于生产环境  开发环境等待几秒后 错误还是会渲染到页面上,
特点:只能处理生命周期里面的错误 不能补货自己组件产生的错误和其他组件在合成时间,定时器中产生的错误.
使用方式:
getDerivedStateFromError配合componentDidCatch

组件通信方式总结

组件间的关系:
	父子组件
	兄弟组件(非嵌套组件)
	祖孙组件(跨级组件)