创建可重用组件的绝对基础知识
组件和道具
由于 React 仅关注应用程序的视图，因此 React 中的大部分开发都将是组件的创建。组件表示应用程序视图的一部分。Props 只是 JSX 节点上使用的属性（例如 <SomeComponent someProp="some prop's value" />），是我们的应用程序与组件交互的主要方式。在上面的代码片段中，在 SomeComponent 内部，我们可以访问 this.props，其值为 {someProp: "some prop's value"}。
将 React 组件视为简单函数可能很有用 - 它们以 props 的形式获取输入，并将输出生成为标记。许多简单的组件更进一步，使自己成为纯函数，这意味着它们不会产生副作用，并且是幂等的（给定一组输入，组件将始终产生相同的输出）。通过实际创建组件作为函数而不是类，可以正式实现此目标。有三种方法可以创建 React 组件：
- 功能（无状态）组件
const FirstComponent = props => (
<div>{props.content}</div>
);
React.createClass()
const SecondComponent = React.createClass({
render: function () {
return (
<div>{this.props.content}</div>
);
}
});
- ES2015 类
class ThirdComponent extends React.Component {
render() {
return (
<div>{this.props.content}</div>
);
}
}
这些组件的使用方式完全相同：
const ParentComponent = function (props) {
const someText = "FooBar";
return (
<FirstComponent content={someText} />
<SecondComponent content={someText} />
<ThirdComponent content={someText} />
);
}
上面的例子都会产生相同的标记。
功能组件不能在其中具有状态。因此，如果你的组件需要具有状态，那么请选择基于类的组件。有关更多信息，请参阅创建组件
作为最后一点，反应道具一旦被传入就是不可变的，这意味着它们不能在组件内进行修改。如果组件的父级更改了 prop 的值，则 React 处理用 new 替换旧的 props，组件将使用新值重新渲染自身。