第三章 《开发真正可复用的组件》

1、创建类

共有工厂方法、继承React类和无状态函数式组件三种方式来创建组件。

createClass工厂方法：无须用Babel进行转译即可在任何地方运行，这种方式有利于快速上手React，不用花时间学习React生态系统中的各种工具。

继承React.Component：这种方式使用了ES2015语法的类。现代浏览器已经广泛支持class关键字，不过为了稳妥起见，可以用Babel对其进行转译。这种方式比createClass更为标准，推荐开发时使用。

上两种方法的区别：

1、prop：第一个区别在于如何定义组件期望接收的prop及其默认值。

2、状态：createClass工厂方法和extends React.Component方法的另一个重大区别是，组件初始状态的定义方式不同。

3、自动绑定：createClass有一项非常方便的特性，但该特性也会隐藏JavaScript的工作原理，从而造成误解，对于新手而言尤其如此。这项特性允许我们创建事件处理器，并且当调用事件处理器时，this会指向组件本身。

而在类中使用事件处理器，我们需要手动绑定函数。ES2015提供的箭头函数可以自动将当前的this绑定到函数体。

无状态函数组件：无状态函数式组件没有任何内部状态，这正是因为this不存在所导致的。这使得无状态函数式组件无比强大，同时又很容易使用。无状态函数式组件只接收props（以及上下文）参数，并返回相应元素。

无状态函数式组件与状态组件的一项区别在于，this在无状态函数式组件的执行过程中不指向组件本身。由于这个原因，与组件实例相关的setState等方法及生命周期方法都无法使用。

无状态函数式组件没有提供任何像componentDidMount这样的生命周期钩子，它们只实现了一个类似渲染的方法，并将其他工作都交由父组件来执行。

因为无状态函数式组件不能访问组件实例，所以如果使用ref或者事件处理器，需要按以下方式来定义：

() => {

let input

const onClick = () => input.focus()

return (

(input = el)} /> Focus

) } 

无状态函数式组件的另一个不同点在于，无论何时使用ReactTestUltis来渲染他们，都无法取回对组件的引用。

使用无状态函数式组件时，因为没有shouldComponentUpdate方法，所以无法通知React只在props（或某个特定prop）变化时才渲染函数式组件。这不是什么大问题，但在优化时也值得考虑。

2、状态

在组件的生命周期中，可以使用生命周期方法或事件处理器中的setState多次修改状态。当状态发生变化时，React就用新状态渲染组件，这也是文档常提到React组件类似状态机的原因。

当状态发生改变时，React会再次执行渲染方法，因此除了设置新状态，我们不用做任何事。然而某些情况下可能需要在状态更新完成时执行一些操作，React为此提供了一个回调函数。将任意函数作为setState的第二个参数传递，状态更新完成时会触发该函数，同时组件完成渲染。

我们应该总是把setState方法当作异步的，因为官方文档里的介绍说： 无法确保调用 setState 的同步操作。

我们应该牢记，只能将满足需求的最少数据放在状态中。判断状态是否适合保存信息的另一种方式是检查组件外部或子组件是否需要我们所维护的数据。如果多个组件都需要跟踪同一份信息，那么应该考虑使用应用层级的状态管理器，如redux。

1、只要能根据props计算最终值，就不应该将任何数据保存在状态中。

2、始终牢记，设置状态会触发组件重新渲染。因此，应该只将渲染方法要用到的值保存在状态中。

3、用prop类型定义清晰的接口，以便组件可以复用。

4、React Storybook 分离了组件，因此无须运行整个应用就能渲染单个组件，这对开发和测试来说都非常完美。