React整理总结（二、组件化开发）

1.分类

• 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；
• 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；
• 根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；
• 函数组件、无状态组件、展示型组件主要关注UI的展示；
• 类组件、有状态组件、容器型组件主要关注数据逻辑；

2.生命周期

• constructor（）{}
• render
• componentDidMounted | componentDidUpdatedProps, prevState, shot) | componentWillUnmount
• shouldComponentUpdate | getSnapshotBeforeUpdate返回值传递给componentDidUpdate | getDerivedStateFromProps | componentDidCatch ERROR边界

3.组件间的通信

• 父子通信 ，父传子 props（key=value），子传父回调函数，非父子组件context

// AComponent
export const ThemeContext = React.createContext();

<ThemeContext.Provider value={{}}>
<BComponent />
<CComponent />
</ThemeContext.Provider>

// BComponent
consol.log(this.context);

BComponent.context = ThemeContext;

// CComponent 函数式组件
function CCompontent() {
	return (<>
		<ThemeContext.Comsumer>
		{
			value => {}
		}
		</ThemeContext.Comsumer>
	</>)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 类型验证 props-type第三方库
• Context的默认数据在Provider外面使用
• 事务总线

4.setState的用法

• 直接传递一个对象
• 传递一个回调函数

this.setState((preState, props) => {
	return newSate
})
1
2
3

• 第二个回调函数参数可以拿到最新的state

this.setState({msg: 'HELLO WORLD', () => {console.log(this.state.msg);}}
1

• 在React 18以前，在React的合成事件和生命周期函数中，setState是异步的； 在setTimeout等函数和原生DOM事件中，setState是同步到。
• 在React 18 以后，所有的setState都是批处理，所以都是异步的
• 立即执行

flushSync(() => {
this.setState({msg: 'hello'});
});
console.log(this.state.msg) // hello
1
2
3
4