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( ),因为该组件将永远不会更新渲染。并且组件实例卸载后也永远不会再挂载。
网友评论