1、变量初始化
在react组件编写的过程中,组件都需要输入参数,但是对于代码维护者来说,一个组件的使用,首先要知道它的输入。而React中的变量检查和默认值刚好可以做到,一方面可以校验变量,另一方面,可以把组件的输入参数表现出来。
class Input extends React.Component {
// ...
}
Input.defaultProps = {
color: 'blue'
};
Input.propTypes = {
name: React.PropTypes.string.isRequired
};//参数检查仅在开发模式下会有效
所以设置参数的默认值就很有必要了,可以让代码维护者很清楚的知道组件的props有哪些。
2、this与箭头函数
在组件中经常定义回调函数,对于回调函数经常会存在this的丢失问题,要么通过绑定的方式实现绑定this
this.handleClick = this.handleClick.bind(this);
或者通过箭头函数实现绑定this
handleClick = () => {
alert(this.state.message);
}
3、组件列表
React进行虚拟DOM对比的时候,需要通过key来进行判断,所以必须给列表加上key
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
4、React中的状态覆盖
React组件的状态,经常会出现组件的状态会莫名其妙的被覆盖掉。需要很严格地控制组件的更新状态,可以在shouldComponent中控制组件是否会更新。
这个通常会在redux中出现,如果一个组件subscribe了两个参数,但是这两个参数的更新不同步,会造成两次更新,可以通过在shouldComponent中进行进一步判断。
组件的设计状态,最好是无状态组件,输入参数,就可以输出,组件的形成最好是功能通用的最小组件。
6、fragment
React中render只能返回一个节点,所以通常会加上一些无关紧要的div
<div>
<Component1/>
<Component2/>
</div>
react提供了一种更好的方式 ,fragment在生成前端页面也经常能用到。
<React.Fragment>
<Component1/>
<Component2/>
</React.Fragment>