react - xgfexgfe.github.io/uploads/felix/react/react-first-kiss.pdf · 2020-02-20 · facebook...

Reactyuebin@meituan.com

Who are React?

• Facebook

•• 2015.15.20

• React-Native, React-Canvas

Why React?

• web component

•

• UI DOM

Why React?

• JSX

•• Virtual DOM

• React Native App

How to use?

• react.js: React

• rect-dom.js: DOM

• browser.js: JSX javascript

• <script> type=“text/babel”

How to use?• ReactDOM.render()

JSX

• javascript XML

• HTML

• XSS(dangerouslySetInnerHTML)

• HTML ’data-’

• className, htmlFor, style(object)

JSX

• ‘{}’ js

•

• arr.map(function() {})

•

• React

•onClick Capture

• e.stopPropagation() e.preventDefault()

•

• value input/textarea

input value

defaultValue

onChange

textarea value

selectoption selected

radiocheckbox

checked defaultChecked

•

•

• render

•

-

• this.props: ( )

• getDefaultProps:

• this.props.children:

• array | object | string | undefined

• React.Children

-

• propTypes:

• react

• function(props, propName, componentName)

•

-

• propTypes:

• react

• function(props, propName, componentName)

•

-

• this.state:

• getInitialState:

• this.setState: ( )

- Mountingrender()

Updatingrender()

Unmounting

componentWillMount()

componentWillUpdate()

getDefaultProps()

getInitialState()

componentWillUnmount()

shouldComponentUpdate()

componentD

idUpdate()

ReactDOM.unmountCompone

ntAtNode

componentDidMount()

com

pone

ntW

illRe

ceive

Prop

s()

trueState

props

-

•

-

•

- DOM• this.refs[refName]

DOM

• ref

• ReactDOM.findDOMNode(this)

- mixins• Array of Object:

• mixins

• mixin

•

-

• props

•

• Pub/Sub

• flux

flux -

• Action: Action

• Dispatcher: Store, Store

• Store: Action View

• View: Store Action(react components)

• Facebook Flux, Redux, Reflux

- react-with-addons

•

•

•

•

•

• sublime Text JSX

• : babel-sublime

• JSX Emmet

• React

• webpack

• Chrome Extension: React Developer Tools

• React

• ( , -zh-CN )

• Flux

• Demos