一.状态提升

1.为什么有状态提升

因为有单向数据流，我们知道，在 React 中，每个组件只关心它内部的状态，甚至组件无法知道自己是函数组件还是 class 组件。

所以我们的 state 为一个局部量，或者说是被封装起来的，它只对这个组件内部是有效的，在组件外面或者其他组件中不能直接使用这个组件的 state。

2.什么时候使用状态提升

我们可能在日常中遇到这样一个问题，两个组件需要共享数据，一起来完成某一项操作。那这个时候就可以使用到状态提升了。

我们知道，React 的数据是向下流动的，所以，我们可以把这些共享的数据放到这两个组件的共同父组件中，那这两个组件就都能使用这一数据了。这个思想，就称为状态提升( Lefting State Up )。

总结:状态提升的思想其实并不难。就是将子组件的 state 提升到父组件，然后这个父组件的任何子组件就都能使用这个 state，从而达到多个组件之间共享 state 的目的。

二.组合VS继承

1.包含

使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中

function FancyBorder(props) {   ``return (     ``<div className={``'FancyBorder FancyBorder-' + props.color}>       ``{props.children}       ``</div>   ``); } <FancyBorder color=``"blue"``>       ``<h1 className=``"Dialog-title"``> Welcome</h1> </FancyBorder>

2.特例关系

把一些组件看作是其他组件的特殊实例

function Dialog(props) {   ``return (     ``<FancyBorder color=``"blue"``>       ``<h1 className=``"Dialog-title"``>         ``{props.title}            ``</h1>       ``<p className=``"Dialog-message"``>         ``{props.message}            ``</p>     ``</FancyBorder>   ``); }     <Dialog       ``title=``"Welcome"      ``message=``"Thank you for visiting our spacecraft!" />

类似于vue的slot插槽

目前并没有发现需要使用继承的地方。

三.事件处理

1.React事件处理VS原生Dom事件处理

React 事件绑定属性的命名采用驼峰式写法

如果采用 JSX 的语法你需要传入一个函数作为事件处理函数

另外在React当中，return false不会阻止事件的默认行为，需要调用 e.preventDefault();

2.绑定事件处理函数的this问题

bind和箭头函数