W3CTech美团react专场-Thinking in React
4 likes929 views
拥抱未来但并不局限于标准的 React，有哪些叹为观止的设计以确保其易用性和高性能？为什么在双向绑定大行其道时 React 却使用单向数据流的设计？仅关注 UI 层的 React 其当前的生态圈还有哪些方面值得建设？
More Related Content
What's hot (20)
Viewers also liked (16)
More from 美团点评技术团队 (13)
W3CTech美团react专场-Thinking in React
- 1. Thinking in React 美团技术团队 陈益国 美团 React 专场
- 2. ⺫⽬目录 1. 拥抱未来 2. 设计原则 3. ⾼高性能 4. ⽣生态圈
- 3. 拥抱未来
- 4. React or Web Components
- 5. Hello world of Web Component <hello-world></hello-world>
- 6. Hello world of React <HelloWorld></HelloWorld>
- 7. Web Components React • 封装性（Shadow DOM） • 可移植性（原⽣生⽀支持） • ⾼高性能（Vitural DOM） • 松耦合
- 8. React or + Web Components
- 10. Client + Server Rendering • 更好的⽤用户体验 • 可维护性 • SEO
- 12. Classes、static、Arrow Function class HelloWorld extends React.Component { constructor (props) { super(props); this.state = { name: 'mxTeam' }; } sayHello = () => { console.log(`Hello ${this.state.name}`); } static defaultProps = { content: 'World!' }; render () { return ( <div onClick={this.sayHello}>Hello {this.props.content}</div> ) } };
- 13. 设计原则
- 14. JSX
- 15. var myDivElement = <div className="foo" />; var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent someProperty={true} />; Render a HTML tag Render a Component
- 20. 设计原则 • 化繁为简 • 可预测性 • 单向数据流
- 21. ⾼高性能
- 23. Virtural DOM
- 24. Create ReactElement(Virutal DOM) var root = React.createElement('div'); var root = ( <div></div> );
- 25. ReactElement { type: 'div', ref: null, key: null, props: Object } 4 个简单的属性，没有 prototype 通过 React.render 将 ReactElement 渲染成常规的 DOM
- 26. Diff
- 27. 同层级 diff node类型 <div /> <span /> component类型 <Header /> <Content /> attribute <div foo=“bar” /> <div foo=“biz” /> style <div style={{color:’#666’}} /> <div style={{fontWeight:’bold’}} />
- 28. 列表 diff <ul> <li>a</li> <li>b</li> <li>d</li> <li>e</li> <ul> <ul> <li>a</li> <li>b</li> <li>d</li> <li>e</li> <li>c</li> <ul> <ul> <li key=“a”>a</li> <li key=“b”>b</li> <li key=“c”>c</li> <li key=“d”>d</li> <li key=“e”>e</li> <ul> key is key
- 29. Render
- 30. this.state = { foo: null }; ... this.setState({ foo: 'bar' }); console.log(this.state.foo); // null 为什么 setState 是⼀一个异步操作 批量操作
- 31. Render 流程 标记 dirty 重新 render ⼦子树
- 32. shouldComponentUpdate: function (nextProps, nextState) { // return nextProps.id === this.props.id; // return nextState.id === this.state.id; } shouldComponentUpdate
- 33. 更优的 事件代理 • 绑定⾄至⽂文档的根节点 • 仅迭代组件的根节点
- 34. ⽣生态圈
- 35. 双向绑定 VS 单向数据流 • 脏检查 & Object.observe • 复杂度⾼高，数据不可预测 • setState & immutable • 简单清晰，数据可预测
- 36. Flux
- 37. Flux 的流程结构
- 38. • Action ⽤用户交互、数据交互都是⼀一个Action • Dispatcher 分发动作给 Store • Store 数据存储中⼼心，响应 Action，对数据进⾏行修改 • View 监听数据变化的事件，从 Store 获取数据，触发 Action
- 39. • Flux • Reflux • Redux • … R
- 41. class FriendInfo { statics = { queries: { user () { return graphql ` User { name, mutual_friends { count } } `; } } }; render () { var user = this.props.user; return ( <div> <span>{user.name}</span> <span>{user.mutual_friends.count} mutual friends</span> </div> ); } };
- 42. 跨平台／终端
- 43. Thanks & End