转自:https://segmentfault.com/a/1190000008402834
当我们谈起React的时候,多半会将注意力集中在组件之上,思考如何将页面划分成一个个组件,以及如何编写可复用的组件。但对于接触React不久,还没有真正用它做一个完整项目的人来说,理解如何创建一个组件也并不那么简单。在最开始的时候我以为创建组件只需要调用createClass
这个api就可以了;但学习了ES6的语法后,又知道了可以利用继承,通过extends React.component
来创建组件;后来在阅读别人代码的时候又发现了PureComponent
以及完全没有继承,仅仅通过返回JSX语句的方式创建组件的方式。下面这篇文章,就将逐一介绍这几种创建组件的方法,分析其特点,以及如何选择使用哪一种方式创建组件。
几种方法
1.createClass
如果你还没有使用ES6语法,那么定义组件,只能使用React.createClass
这个helper来创建组件,下面是一段示例:
var React = require("react");
var Greeting = React.createClass({
propTypes: {
name: React.PropTypes.string //属性校验
},
getDefaultProps: function() {
return {
name: 'Mary' //默认属性值
};
},
getInitialState: function() {
return {count: this.props.initialCount}; //初始化state
},
handleClick: function() {
//用户点击事件的处理函数
},
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
module.exports = Greeting;
这段代码,包含了组件的几个关键组成部分,这种方式下,组件的props、state等都是以对象属性的方式组合在一起,其中默认属props和初始state都是返回对象的函数,propTypes则是个对象。这里还有一个值得注意的事情是,在createClass中,React对属性中的所有函数都进行了this
绑定,也就是如上面的hanleClick
其实相当于handleClick.bind(this)
。
2.component
因为ES6对类和继承有语法级别的支持,所以用ES6创建组件的方式更加优雅,下面是示例:
import React from 'react';
class Greeting extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.handleClick = this.handleClick.bind(this);
}
//static defaultProps = {
// name: 'Mary' //定义defaultprops的另一种方式
//}
//static propTypes = {
//name: React.PropTypes.string
//}
handleClick() {
//点击事件的处理函数
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Greeting.propTypes = {
name: React.PropTypes.string
};
Greeting.defaultProps = {
name: 'Mary'
};
export default Greating;
可以看到Greeting继承自React.component,在构造函数中,通过super()来调用父类的构造函数,同时我们看到组件的state是通过在构造函数中对this.state进行赋值实现,而组件的props是在类Greeting上创建的属性,如果你对类的属性
和对象的属性
的区别有所了解的话,大概能理解为什么会这么做。对于组件来说,组件的props是父组件通过调用子组件向子组件传递的,子组件内部不应该对props进行修改,它更像是所有子组件实例共享的状态,不会因为子组件内部操作而改变,因此将props定义为类Greeting的属性更为合理,而在面向对象的语法中类的属性通常被称作静态(static)属性,这也是为什么props还可以像上面注释掉的方式来定义。对于Greeting类的一个实例对象的state,它是组件对象内部维持的状态,通过用户操作会修改这些状态,每个实例的state也可能不同,彼此间不互相影响,因此通过this.state来设置。
用这种方式创建组件时,React并没有对内部的函数,进行this绑定,所以如果你想让函数在回调中保持正确的this,就要手动对需要的函数进行this绑定,如上面的handleClick,在构造函数中对this 进行了绑定。
3.PureComponet
我们知道,当组件的props或者state发生变化的时候:React会对组件当前的Props和State分别与nextProps和nextState进行比较,当发现变化时,就会对当前组件以及子组件
进行重新渲染,否则就不渲染。有时候为了避免组件进行不必要的重新渲染,我们通过定义shouldComponentUpdate
来优化性能。例如如下代码:
class CounterButton extends React.Component {
constructor(props) {
super(props);
this.state = {count: 1};
}
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}
shouldComponentUpdate
通过判断props.color
和state.count
是否发生变化来决定需不需要重新渲染组件,当然有时候这种简单的判断,显得有些多余和样板化,于是React就提供了PureComponent
来自动帮我们做这件事,这样就不需要手动来写shouldComponentUpdate
了:
class CounterButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {count: 1};
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}
大多数情况下, 我们使用PureComponent
能够简化我们的代码,并且提高性能,但是PureComponent
的自动为我们添加的shouldComponentUpate
函数,只是对props和state进行浅比较(shadow comparison),当props或者state本身是嵌套对象或数组等时,浅比较并不能得到预期的结果,这会导致实际的props和state发生了变化,但组件却没有更新的问题,例如下面代码有一个ListOfWords
组件来将单词数组拼接成逗号分隔的句子,它有一个父组件WordAdder
让你点击按钮为单词数组添加单词,但他并不能正常工作:
class ListOfWords extends React.PureComponent {
render() {
return <div>{this.props.words.join(',')}</div>;
}
}
class WordAdder extends React.Component {
constructor(props) {
super(props);
this.state = {
words: ['marklar']
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// 这个地方导致了bug
const words = this.state.words;
words.push('marklar');
this.setState({words: words});
}
render() {
return (
<div>
<button onClick={this.handleClick} />
<ListOfWords words={this.state.words} />
</div>
);
}
}
这种情况下,PureComponent
只会对this.props.words进行一次浅比较,虽然数组里面新增了元素,但是this.props.words与nextProps.words指向的仍是同一个数组,因此this.props.words !== nextProps.words 返回的便是flase,从而导致ListOfWords组件没有重新渲染,笔者之前就因为对此不太了解,而随意使用PureComponent,导致state发生变化,而视图就是不更新,调了好久找不到原因~。
最简单避免上述情况的方式,就是避免使用可变对象作为props和state,取而代之的是每次返回一个全新的对象,如下通过concat
来返回新的数组:
handleClick() {
this.setState(prevState => ({
words: prevState.words.concat(['marklar'])
}));
}
你可以考虑使用Immutable.js
来创建不可变对象,通过它来简化对象比较,提高性能。
这里还要提到的一点是虽然这里虽然使用了Pure
这个词,但是PureComponent
并不是纯的,因为对于纯的函数或组件应该是没有内部状态,对于stateless component
更符合纯的定义,不了解纯函数的同学,可以参见这篇文章。
4.Stateless Functional Component
上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Component
来快速创建组件。例如下面代码所示:
import React from 'react';
const Button = ({
day,
increment
}) => {
return (
<div>
<button onClick={increment}>Today is {day}</button>
</div>
)
}
Button.propTypes = {
day: PropTypes.string.isRequired,
increment: PropTypes.func.isRequired,
}
这种组件,没有自身的状态,相同的props输入,必然会获得完全相同的组件展示。因为不需要关心组件的一些生命周期函数和渲染的钩子,所以不用继承自Component显得更简洁。
对比
createClass vs Component
对于React.createClass
和 extends React.Component
本质上都是用来创建组件,他们之间并没有绝对的好坏之分,只不过一个是ES5的语法,一个是ES6的语法支持,只不过createClass支持定义PureRenderMixin,这种写法官方已经不再推荐,而是建议使用PureComponent。
pureComponent vs Component
通过上面对PureComponent和Component的介绍,你应该已经了解了二者的区别:PureComponent
已经定义好了shouldUpdateComponent
而Component
需要显示定义。
Component vs Stateless Functional component
-
Component
包含内部state,而Stateless Functional Component
所有数据都来自props,没有内部state; -
Component
包含的一些生命周期函数,Stateless Functional Component
都没有,因为Stateless Functional component
没有shouldComponentUpdate
,所以也无法控制组件的渲染,也即是说只要是收到新的props,Stateless Functional Component
就会重新渲染。 -
Stateless Functional Component
不支持Refs
选哪个?(重点!!!)
这里仅列出一些参考:
-
createClass, 除非你确实对ES6的语法一窍不通,不然的话就不要再使用这种方式定义组件。
-
Stateless Functional Component, 对于不需要内部状态,且用不到生命周期函数的组件,我们可以使用这种方式定义组件,比如展示性的列表组件,可以将列表项定义为Stateless Functional Component。
-
PureComponent/Component,对于拥有内部state,使用生命周期的函数的组件,我们可以使用二者之一,但是大部分情况下,我更推荐使用PureComponent,因为它提供了更好的性能,同时强制你使用不可变的对象,保持良好的编程习惯。
参考文章
optimizing-performance.html#shouldcomponentupdate-in-action
pureComponent介绍
react-functional-stateless-component-purecomponent-component-what-are-the-dif
4 different kinds of React component styles
react-without-es6
react-create-class-versus-component
react系列之ref:
转自: https://blog.csdn.net/qq_18661257/article/details/63683212
在一般的数据流中也就是从上而下的单向数据流中,我们一般都是父组件要影响控制子组件必须要通过props
来处理,即便是之前讲过this.state
,但是那个东西也是针对自己的,而不是增对其它组件的,组件之间的影响到目前为止只能通过props
来处理,这会非常的麻烦,所以React
提供了一个特殊的接口来处理这种事件。
ref
的用处
ref
用在处理表单空间聚焦,文本选择,媒体播放以及触发动画效果等等
官方强调不要用ref
直接去做非常明显的事件,比如说Dialog
组件打开和关闭的open()
和close()
可以通过isOpen
去控制,而不是明显的函数处理
ref
是一个React
的非常特殊的属性,这个属性一定是接受一个回调函数,这个回调函数会在组件渲染时进行执行一遍,在从视图中撤出来时会执行一遍
1.为DOM
元素增加ref
当我们用为HTML
元素增加ref
属性时,我们的ref
会传递一个参数给回调函数
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
}
focus() {
this.textInput.focus();
}
render() {
return (
<div>
<input
type="text"
ref={(input) => { this.textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={this.focus}
/>
</div>
);
}
}当React
在组件渲染时调用回调函数时,这个参数就是DOM
元素本身,在撤离视图时会返回null
2.为类组件增加ref
跟HTML
元素一样,为类组件调用ref
回调函数的时机是一样的,只是参数是组件的一个实例
class AutoFocusTextInput extends React.Component {
componentDidMount() {
this.textInput.focus();
}
render() {
return (
<CustomTextInput
ref={(input) => { this.textInput = input; }} />
);
}
}
3.ref
在函数式组件中不可用
不要企图在函数式组件中使用ref
属性来进行回调函数的绑定,因为函数式组件是没有实例的,准确的说函数式组件不是一个真正的类
function MyFunctionalComponent() {
return <input />;
}
class Parent extends React.Component {
render() {
// 这将会出问题
return (
<MyFunctionalComponent
ref={(input) => { this.textInput = input; }} />
);
}
}
就前面一篇博客提到的,我们应该将函数式组件转换为类组件,才能使用ref
属性,当然虽然无法对函数式组件使用ref
属性,但是为函数式组件里面的HTML
元素和类组件使用ref
属性是可以的
function CustomTextInput(props) {
let textInput = null;
function handleClick() {
textInput.focus();
}
return (
<div>
<input
type="text"
ref={(input) => { textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}
不要过度的使用
ref
属性
ref
从一定程度上增加了组件之间的耦合性,导致难以分离,所以如果可以用props
来处理的事情,尽量不要用ref
来处理
过时的
refs
字符串
在以前的一些React
版本通过this.refs
可以获取一个字符串,这个方法在将来会被抛弃所以请不要使用,即便是ref
可以设置为一个字符串,但是强烈建议用回调函数