React设计模式和最佳实践总结
# 一、组件实践
# 1.1 设计原则
- 保持接口小，
props数量要少 - 根据数据边界来划分组件，充分利用组合
- 把 state 往上层组件提取，让下层组件只需要实现为纯函数
# 1.2 组件划分
任何一个复杂组件都是从简单组件开始的，一开始我们在 render 函数里写的代码不多，但是随着逻辑的复杂，JSX 代码越来越多，于是，就需要拆分函数中的内容
- 在 React 中，有一个误区，就是把 render 中的代码分拆到多个 renderXXXX 函数中去，比如下面这样
class StopWatch extends React.Component {
render() {
const majorClock = this.renderMajorClock();
const controlButtons = this.renderControlButtons();
const splitTimes = this.renderSplitTimes();
return (
<div>
{majorClock}
{controlButtons}
{splitTimes}
</div>
);
}
renderMajorClock() {
//TODO: 返回数字时钟的JSX
}
renderControlButtons() {
//TODO: 返回两个按钮的JSX
}
renderSplitTimes() {
//TODO: 返回所有计次时间的JSX
}
}
@前端进阶之旅: 代码已经复制到剪贴板
用上面的方法组织代码，当然比写一个巨大的 render 函数要强，但是，实现这么多 renderXXXX 函数并不是一个明智之举，因为这些 renderXXXX 函数访问的是同样的 props 和 state，这样代码依然耦合在了一起。更好的方法，是把这些 renderXXXX 重构成各自独立的 React 组件，像下面这样
class StopWatch extends React.Component {
render() {
return (
<div>
<MajorClock>
<ControlButtons>
<SplitTimes>
</div>
);
}
}
const MajorClock = (props) => {
//TODO: 返回数字时钟的JSX
};
const ControlButtons = (props) => {
//TODO: 返回两个按钮的JSX
};
const SplitTimes = (props) => {
//TODO: 返回所有计次时间的JSX
}
@前端进阶之旅: 代码已经复制到剪贴板
我们创造了
MajorClock、ControlButtons和SplitTimes这三个组件，目前，我们并不知道它们是否应该有自己的state，但是从简单开始，首先假设它们没有自己的state，定义为函数形式的无状态组件
组件 props 的设计
使用 propTypes 来定义组件的 props
const ControlButtons = (props) => {
//
