React——(二)

React事件

React有自己的事件系统，

React中的事件是SyntheticEvent。这是一个基于浏览器本机事件的跨浏览器的封装。它与浏览器的本身事件具有相同的接口，包括stopPropagation()和preventDefault()，但事件在所有浏览器中的工作方式相同。如果你需要了解底层的事件，可以使用它的nativeEvent属性。

SyntheticEvent有以下属性：

boolean bubbles

boolean cancelable

DOMEventTarget currentTarget

boolean defaultPrevented

number eventPhase

boolean isTrusted

DOMEvent nativeEvent

void preventDefault()

boolean isDefaultPrevented()

void stopPropagation()

boolean isPropagationStopped()

void persist()

DOMEventTarget target

number timeStamp

string type

React为什么不采用原来的事件处理方式：

1、浏览器的兼容性：React对事件进行了规范化处理，使得可以跨越多个浏览器，保持一致的属性。

2、性能问题

SyntheticEvent是基于池的。这意味着在调用事件回调之后，将重用SyntheticEvent对象，并且所有属性都将为null。这是出于性能原因。因此，您不能以异步方式访问事件。或者使用event.persist()。

React 组件生命周期

组件创建步骤：

1、获取Default props,constructor()。

2、获取Default state。getDerivedStateFromProps()。

3、ComponentWillMount

4、render()

5、ComponentDidMount

State发生更新：

1、shouldComponentUpdate

2、componentWillUpdate

3、render

4、componentDidUpdate

Prop发生更新：

1、componentWillReceiveProps

2、shouldComponentUpdate

3、componentWillUpdate

4、render

5、componentDidUpdate

组件销毁阶段：

1、componentWillUnmount