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
export const ThemeContext = React.createContext();
<ThemeContext.Provider value={{}}>
<BComponent />
<CComponent />
</ThemeContext.Provider>
consol.log(this.context);
BComponent.context = ThemeContext;
function CCompontent() {
return (<>
<ThemeContext.Comsumer>
{
value => {}
}
</ThemeContext.Comsumer>
</>)
}
- 类型验证 props-type第三方库
- Context的默认数据在Provider外面使用
- 事务总线
4.setState的用法
this.setState((preState, props) => {
return newSate
})
this.setState({msg: 'HELLO WORLD', () => {console.log(this.state.msg);}}
- 在React 18以前,在React的合成事件和生命周期函数中,setState是异步的; 在setTimeout等函数和原生DOM事件中,setState是同步到。
- 在React 18 以后,所有的setState都是批处理,所以都是异步的
- 立即执行
flushSync(() => {
this.setState({msg: 'hello'});
});
console.log(this.state.msg)