[目前最火的前端开发框架]React组件的应用分析

时间:2022-10-21 09:28:17

React组件

一、如何创建React组件

方式一:React.createClass

用 React.createClass 构建组件是 React 最传统、也是兼容最好的方法。

const Button = React.createClass({
getDefaultProps() {
return {
color:
'blue',
text:
'http://jartto.wang'
};
},
render() {
const { color, text }
= this.props;
return (
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
});

React.createClass 方法就是构建一个组件对象。当另一个组件需要调用 Button 组件时,只用写成

<Button />

就可以被解析成 React.createElement(Button) 方法来创建 Button实例,这意味着在一个应用中调用几次 Button,就会创建几次 Button 实例。

 

方式二:ES6 classes

ES6 classes 的写法是通过 ES6 标准的类语法的方式来构建方法。

import React, { Component } from 'react';
class Button extends Component {
constructor(props) {
super(props);
}
static defaultProps
= {
color:
'blue',
text:
'http://jartto.wang'
}
render() {
return (
<button className = { `btn btn-${color}`}>
<em>{text}</em>
</button>
)
}
}

与 createClass 的结果相同的是,调用类实现的组件会创建实例对象。在 React 组件开发中,常用的方式是将组件拆分到合理的粒度,用组合的方式合成业务组件。

React 的所有组件都继承自顶层类 React.Component,它的定义非常简洁,只是初始化了 ReactComponent 方法,声明了 props、context、refs 等,并在原型上定义了 setState 和 forceUpdate 方法。

内部初始化的生命周期方法与 createClass 方式使用的是同一个方法创建的。

 

方式三:无状态函数

使用无状态函数构建的组件称为无状态组件,这种构建方式是 0.14 版本之后增加的,且官方颇为推崇。

function Button({color='blue',text='http'){
return (
<button className = {`btn btn-${color}`}>
<em>{text}</em>
</button>
)
}

无状态组件只传入 props 和 context 两个参数。也就是说,它不存在 state,也没有生命周期方法,组件本身即上面两种 React 组件构建方法中的 render 方法。不过,像 propType 和 defaultProps 还是可以通过向方法设置静态属性来实现。

 

二、不同创建组件方式的使用场景

不错,我们有很多方式来创建 React 组件,那么问题来了,我们该如何抉择?这里我们把 React.createClass 和 ES6 classes 归为一类,称作有状态组件,而 function 类型的称为无状态组件。

下来我们主要来区分有状态组件和无状态组件的适用场景。

先来假设有这样的需求:在接入一个地图功能的时候,要求数据实时刷新,那么我们有两种方式实现:

其一:通过 sockets 来推数据,在初始化组件的时候,建立连接,然后动态更改数据;

其二:在组件初始化的时候,设置定时器更新数据,组件卸载时移除定时器;

当然,方式一需要后端 sockets 处理,我们用定时器来试试。那么问题其实已经转化为:如何在 React 组件中使用定时器,下面是官方推荐的写法:

class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {secondsElapsed:0};
}
tick() {
this.setState((prevState)=>({
secondsElapsed:prevState.secondsElapsed
+1
}));
}
componentDidMount() {
this.interval=setInterval(()=>this.tick(),1000);
}
componentWillUnmount(){
clearInterval(
this.interval);
}
render() {
return (
<div>Seconds Elapsed:
{
this.state.secondsElapsed}
</div>
);
}
}
ReactDOM.render(
<Timer />, mountNode);

计时器要 在componentDidMount 生命周期方法挂上,然后在 componentWillUnmount 生命周期方法清除。


无状态意味着也就没有生命周期函数,那么如果是这样的话,上述功能实现将不适合使用无状态组件方式,因为你很难找到合适的时机去创建和移除定时器。

 

无状态组件的创建形式使代码的可读性更好,并且减少了大量冗余的代码,精简至只有一个render方法,大大的增强了编写一个组件的便利,除此之外无状态组件还有以下几个显著的特点

(详情:http://www.cnblogs.com/wonyun/p/5930333.html

组件不会被实例化,整体渲染性能得到提升

    组件就不会在有组件实例化的过程,无实例化过程也就不需要分配多余的内存,从而性能得到一定的提升。

    组件不能访问 this 对象

无状态组件由于没有实例化过程,所以无法访问组件this中的对象,例如:this.ref、this.state 等均不能访问。若想访问就不能使用这种形式来创建组件。

 

组件无法访问生命周期的方法

因为无状态组件是不需要组件生命周期管理和状态管理,所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。

 

无状态组件只能访问输入的 props,同样的 props 会得到同样的渲染结果,不会有副作用。

 

从《深入 React 技术栈》中摘录到这样一句话:

在适合的情况下,我们都应该且必须使用无状态组件。无状态组件不像其他两种方法在调用时会创建新实例,它创建时始终保持了一个实例,避免了不必要的检查和内存分配,做到了内部优化。

 

三、组件生命周期

关于组件生命周期,我们先来看几个概念:

1.挂载与卸载过程;

组件的挂载是最基本的过程,这个过程主要做组件状态的初始化。下面是一个模板:

import React, { Component, PropTypes } from 'react';
class App extends Component {
// static 定义的 propTypes 和 defaultProps
//
可以在类外面访问,如:App.propTypes
static propTypes = { //props 类型检查 };
static defaultProps = { //默认类型 };
constructor(props) {
super(props);
this.state = { //... };
}
componentWillMount()
{
// render 方法之前执行}
componentDidMount()
{
// render 方法之后执行}
render()
{
return <div>jartto's blog</div>;
}
}
}
}
}
}
}

组件卸载非常简单,只有 componentWillUnmount 这一个卸载前状态:

import React, { Component, PropTypes } from 'react';
class App extends Component {
componentWillUnmount() {
//... }
render()
{
return <div>jartto's blog</div>;
}
}
}

在 componentWillUnmount 方法中,我们常常会执行一些清理方法,如事件回收或者是清除定时器。

2.生命周期;

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

3.图示流程;

[目前最火的前端开发框架]React组件的应用分析

 

四、总结

React 中组件的使用不外乎文中写的这些,甚至在我们日常的项目中很多生命周期方法都用不到。但是作为一个开发者,我们要更深层次的理解这些,这样有助于我们使用最适当的方式去高效编程