04:class组件与生命周期
class组件基础
React的组件可以定义为<u>class 或者 函数</u>的形式。组件接收Props输入,并返回React元素的输出,React元素描述了用户界面的外观。
组件通常分为两类:<u>有状态 和 无状态。</u>
有状态组件,通常使用API:render, state, 和生命周期相关的事件
无状态组件,通常使用API:render, props, 和context
如果我们定义class组件,则需要继承React.Component
。而在React.Component
'的子类中,必须定义render( )
函数。
class Welcome extend React.Component {
render( ) {
return <h1>Hello, {this.props.name}></h1>
}
}
React不强制用ES6的class语法,也可以用create-react-class模块代替。这个方法想学去看官网,本文只介绍ES6相关语法内容。
PS:函数(function)和方法(method)的区别
函数:是一段可以执行的JS代码,通过函数名调用,可以传入实参或形参,定义要执行的内容,然后用返回值表示计算结果。可以没有参数,也可以没有返回值。
方法:<u>与函数大致相同,但需要被对象调用</u>。主要不同于函数的地方,是方法中的数据是隐式传递,并且方法可以操作class内部的数据。
组件的生命周期
什么是生命周期?
答:简单理解,React通过定义了几个函数,来控制组件在每个阶段的动作,这些函数叫生命周期。
每个组件都包含“生命周期方法”,如果要在程序特定阶段执行特定功能,那么就需要声明并重写生命周期方法。
React生命周期图谱
如上图,组件生命周期包括:<u>挂载,更新,卸载</u>三个阶段
同时方便记忆,既然是组件的声明周期,所以除了render和constructor外,所有生命周期的开头都是component。
一、挂载
当组件实例被创建,并插入DOM中,其生命周期调用顺序如下(只写常用的):
- constructor( )
- render( )
- componentDidMount( )
constructor( )
通常,在 React 中,构造函数仅用于以下两种情况:
- 通过给 this.state 赋值对象来初始化内部 state。
- 为事件处理函数绑定实例
- 事件处理函数:用ES6 class语法定义组件时,跟constructor()同级的其他函数
constructor(props) {
super(props);
// 不要在这里调用 this.setState()
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
在构造函数中,第一个语句必须是super();如果子类想使用this私有函数,不调用super( )函数会报错。通过super还能继承父级的参数。
在constructor( )中只能用this.state赋值,不能使用this.setState( )方法。而且内部不能调用其他方法,是为了避免其他方法中用到this.setState( )。
render( )
render( )方法
一个组件类(class)中唯一必须实现的方法,这个方法必须返回一个JSX元素,用来重新渲染组件。
render() 函数应该为纯函数,这意味着在不修改组件 state 的情况下,每次调用时都返回相同的结果,render( )不直接与浏览器交互。如需交互,请在 componentDidMount() 或其他生命周期方法中执行。
保持 render() 为纯函数,可以使组件更容易思考。
componentDidMount( )
本方法会在组件挂载后(插入DOM树)立即调用。
此周期可以直接调用setState( ),但会触发render( )额外渲染,降低性能。所以应在constructor( )中初始化state,但如果渲染依赖于DOM节点的大小或位置,还是应该调用setState( )进行处理。
二、更新
- render( )
- componentDidUpdate( )
componentDidUpdate(prevProps, PrevState, snapshot)
本方法会在更新后立即被调用,首次渲染不会执行此方法。
当组件更新后,可以在此对DOM进行操作。你可以在本方法中直接调用setState( ), 但它必须被包裹在一个条件语句里,不然会导致死循环。
三、卸载
- componentWillUnmount( )
本方法会在组件卸载及销毁之前直接调用,在此方法中执行必要的清理操作。如,清除定时器timer,取消网络请求,或清除在componentDidMount( )中创建的订阅等。
本方法中不应该调用setState( ),因为该组件将永远不会更新渲染。并且组件实例卸载后也永远不会再挂载。