React.js.

Presentation on theme: "React.js."— Presentation transcript:

1 React.js

2 Why React? React aims to solve one problem: building large applications with data that changes over time. Simple 只处理 View 在JS里直接写类HTML，更直接，省去复杂的 DSL Component 内聚性高，关注分离，很容易重用和嵌套 Declarative 只需声明怎么显示，不需要关心怎么更新DOM one-way data binding 更高效 DSL（Domain specific language） 领域特定语言 模板语言：handlebars、ejs、mustache、underscore、nunjucks、xtemplate 有哪些好用的前端模板引擎

3 目录 Component 组件 坑/技巧 Event 事件 React Rending 多Components通信

4 Component 组件

5 Web Component W3C Draft Google Polymer (since 2013) Mozilla X-Tag Angular directive (similar) W3c组件化草案 2013年Google I/O大会Google WebOS团队宣布了一套号称一切皆组件、最少代码量、最少框架限制为设计理念的Polymer WebUI组件 火狐推出微软赞助支持开发的X-Tag Google憋出大招推出数据双向绑定的Angular

6 HTML Component

7 React Component 编译 前后行数不变

8 React Component React is all about building reusable components.
Components make code reuse, testing, and separation of concerns easy. Components are Just Like Functions that take in props, state and render HTML

9 Component 几个重要的方法 render() componentDidMount() propTypes
required method 保持简单，不要在这里操作DOM，不要在这里修改state componentDidMount() view已经render好，在这里可以操作DOM，this.getDOMNode()取节点 propTypes 对parent传进来的props做验证，只作用于development环境 getInitialState() 返回 state 初始值，可以在这里使用 this.props this.setState() 设置state值， 这里可以有回调函数 forceUpdate() 不建议使用 当更新了除this.props和this.state外的内容时调用。forceUpdate() 会调用当前 component 和子级 component 的 `render()`，仍会使用Virtual DOM，所以仍然很快

10 this.props 原则上不可改变 数据由 parent 传入

11 this.props.children 返回component标签内部包含的components，开发dialog, popup等容器类组件时可用。 如果有多个子级components，会返回数组 如果只有一个子级components, 返回这个component 如果没有子结果，返回 undefined 3种不同的结果可以使用 React.Children 工具类统一处理

12 this.props.children

13 this.state State should contain data that a component's event handlers may change to trigger a UI update. Try to keep as many of your components as possible stateless. 只属于当前component，不可传递也不可继承 更新state的方式只有两种：getInitialState(), setState(obj) setState(obj) 异步操作，不会立即更新this.state，也不会立即调用render 是merge合并，而不是替换

14 this.setState

15 Fail with 'Uncaught objec'
不建议使用 this.setProps() Pass 受控组件 非受控组件 Fail with 'Uncaught objec'

16 PropTypes 对从parent传入的props做验证 验证失败会抛warning，只在development环境生效

17 Environment 环境 development production debug 版本，有 PropTypes 验证
min 版本，速度有做优化，会跳过 PropTypes 验证

18 this.refs 不建议使用

19 复杂点的栗子

20 坑

21 JSX 坑 多行时要用小括号 () 括起来 JavaScript表达式要用大括号 {} 括起来
给节点设置样式要使用 className，因为class是保留关键字 最外层只能有一个节点，这个节点是根节点 渲染html属性：dangerouslySetInnerHTML={{__html:”<p>test</p>”}} 非标准属性会被忽略，要使用data-* <p age=‘18’>Hello</p> age 属性不会显示到 DOM <p data-age='18'>Hello</p> data-age 会显示出来

22 classSet处理样式

23 处理inline style × √

24 Event 事件

25 Event 事件 React使用SyntheticEvent 合成事件 1.使用e.preventDefault阻止事件的发生; 2.event.nativeEvent 返回浏览器原生事件 3.调用方式如下图 原生浏览器事件的差异 1. return false阻止事件的发生 2.调用方式

26 Event 事件

27 事件绑定 Autobinding Auto delegation
事件自动绑定到当前 component 实例，即 `this` 指向当前component Auto delegation React 并不直接在node上绑定event。 当React启动时，它会在 component 最外层节点上仅使用一个 event listener 监听所有 events。当component mounted或unmounted时，event listener 只是在内部 mapping 里添加或删除event handler.

28 React Rending

29

30 View 生命周期 View 初始化 setState后更新 父级更新props 销毁 getDefaultProps
getInitialState componentWillMount render componentDidMount setState后更新 shouldComponentUpdate componentWillUpdate render componentDidUpdate 父级更新props componentWillReceiveProps 同 setState后更新流程 销毁 componentWillUnmount

31

32 Virtual DOM 通过两个DOM Tree比较来批量更新
第一次调用 render() 后保存一个当前的Virtual DOM Tree. 需要更新DOM时，重新调用 render 生成新的 Virtual DOM，并与旧的比较 如果有变化，则对变化部分做批量更新

33 性能优化 会直接把paragraph 1删除吗? 不会 更新前 更新后 实际过程：
1. 把‘Paragraph 1’节点内容更新为‘Paragraph 2’， 2. 删除‘Paragraph 2’节点

34 性能优化 使用 css show/hide 节点，而不是直接删除 处理 list 时需要加 key

35 性能优化 List demo setState 会重新 render 所有的子树。为了性能考虑，应该尽可能在低层处调用setState，并使用 shouldComponentUpdate 来阻止大子树不必要的重新render。

36 shouldComponentUpdate
性能优化 shouldComponentUpdate

37 多Components通信

38 多Components通信: parent -> child
直接传props

39 多Components通信: Child -> parent
通过props传callback方法 代理模式

40 多Components通信: 非父子关系 使用全局事件 Subscribe to events in componentDidMount()
unsubscribe in componentWillUnmount() when you receive an event, call setState() 适配器模式

41 OTHER WONDERS Can be used with SVG, VML, Canvas
Can be used with NodeJS (同构) Can be run with Web Worker Can be tested

42 Thanks