Tips
- 使用函数式组件
- 保持组件尽量小
- 合适处理”this”
- “setState”中使用函数,而不是对象
- 使用”prop-types”
- 浏览器安装”React Developer Tools”
使用函数式组件
- 更少的代码
- 更容易理解
- 无状态
- 容易分解出更小的组件
保持组件尽量小
更容易阅读、测试、重复使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22class Comment extends Component {
render() {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar">
src={this.props.user.avatarUrl}
alt={this.props.user.name}
/>
<div className="User-Name">
{this.props.user.name}
</div>
<div className="Comment-text">
{this.props.text}
</div>
<div className="Comment-date">
{formatDate(this.props.date)}
</div>
</div>
);
}
}
分解出更小的组件
1 | function UserInfo(props){ |
合适处理”this”
使用ES6,组件类不会自动绑定内部函数。
渲染时绑定或使用 arrow function
1
2
3
4
5
6render() {
return (
<button onClick={this.logMessage.bind(this)}/>
<button onClick={() => this.logMessage()}/>
);
}构造时绑定
1
2
3
4
5
6
7
8
9
10constructor(props) {
super(props);
this.logMessage = this.logMessage.bind(this);
}
render() {
return (
<button onClick={this.logMessage}/>
);
}函数定义arrow function
1
2
3
4
5
6
7
8
9logMessage = () => {
console.log("test")
}
render() {
return (
<button onClick={this.logMessage}/>
);
}
“setState”中使用函数,而不是对象
1 | this.setState({correctData: !this.state.correctData}) |
使用函数第一个参数获取prevState,第二个参数porps。
使用”prop-types”
“prop-types”是一个库,检查props的类型
1 | import PropTypes from "prop-types"; |