React扩展(二)

一、Fragment介绍

1、语法:

javascript 复制代码

// Fragment 可以添加属性,而空标签<></>不可以
<Fragment></Fragment>
// 简写形式
<></>

2、作用: 可以不用必须有一个真实的DOM标签,解决jsx语法中多标签下必要一个div父级标签包裹的问题

二、useContent

1、定义: 一种组件通信方式,常用于祖先组件跟后代组件通信

2、语法:

javascript 复制代码

// 祖先组件Parent
// 创建Content容器
const userContext = createContext()
// 渲染时,在祖先组件包裹UserContext.Provider,通过value属性传给后代组件
<UserContext.Provider value={{username: 'tom', age: 18}}>
 <Children />
 </UserContext.Provider>

javascript 复制代码

// 后代组件读取数据
import { UserContext } from './Parent'
const user = useContent(UserContext)

return <h1>{user.username} - {user.age}</h1>

3、注意

在应用开发中,一般不用context,一般用的是它的react插件

三、组件优化

1、component的问题

复制代码

1.1 只要执行setState,即使不改变状态数据,组件也会重新render
1.2 当前组件重新render,就会自动重新render子组件,纵使子组件没有用到父组件的任何数据,这样会导致效率低下

2、效率高的做法

只有当组件的stae/props数据发生改变时才重新render

3、原因

component中的shouldComponentUpdate钩子函数总是返回true

4、解决方案

复制代码

4.1 办法一: 重写shouldComponentUpdata方法,比较新旧state/props数据,如果有变化才返回true,否则为false
4.2 办法二: 使用PureComponent,pureComponent重写了shouldComponentUpdate方法,只有state/props数据有变化才返回true
4.3 使用办法一只是进行state/props数据浅比较,如果只是数据对象内部变化,返回false,不要直接修改state数据,而是要产生新数据;在项目开发中一般使用pureComponent优化

四、render props

1、定义

类似于Vue中的插槽,向组件内部动态传入带内容结构

Vue: 使用slot技术,也就是通过组件标签传入结构

React: 使用children props,通过组件标签体传入结构;使用render props,通过组件标签属性传入结构,一般用renders属性

2、children props语法

javascript 复制代码

// 如果B组件需要A组件内部数据无法实现
<A>
   <B />
</A>

3、render props

javascript 复制代码

// A组件读取数据: {this.props.render(data)}
<A render={date => <B data={data} />} />

五、错误边界

1、定义: 用来捕获后代组件错误,渲染出备用页面

2、特点: 只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件(例如定时器)中产生的错误

3、使用方式

javascript 复制代码

// 生命周期函数:一旦后代组件报错触发
static getDeivedStateFromError(error) {
	// todo
	return { hasError: error}
}
// 统计页面错误,发送请求统计
componentDidCatchError(error, info){
	// todo
}

六、组件通信方式总结

1、组件间关系及适合通信方式

复制代码

1.1 父子关系: props
1.2 兄弟关系: 消息订阅、集中式管理(redux)
1.3 祖孙关系: 消息订阅-发布、集中式管理(redux)、useContext

2、通信方式

复制代码

2.1 props: children props、render props
2.2 消息订阅-发布: pub-sub、event
2.3 集中式管理: redux、dva等
2.4 context: 生产者-消费者模式