react思考 By 曹毅

react简单学习

1. react思考 - By 曹毅 2019/1/17 react思考 学习react过程中的思考与总结 效 效率 率 代 代码 码可 可维 维护 护性 性 Star http://172.25.121.8:8080/md/test.md?print=1 Fork Follow @youzaiyouzai666 1/33
2. 2019/1/17 react思考 - By 曹毅 主要内容 基本语法 - JSX——模板语法 - 组件创建 - 组件生命周期 - 事件系统 一般开发流程 组件 - 组件基础深入 - 组件之间通信 - 组件抽象与复用 状态管理 react代码分割 http://172.25.121.8:8080/md/test.md?print=1 2/33
3. 2019/1/17 react思考 - By 曹毅 基本语法 JSX——模板语法 组件创建 组件的states和props 组件生命周期 事件系统 http://172.25.121.8:8080/md/test.md?print=1 3/33
4. react思考 - By 曹毅 2019/1/17 JSX——模板语法 实际 jsx 语法 最终被 babel 转换为 createElemen const element = ( <h1 className="greeting"> Hello, world! </h1> ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); //React.createElement() // : const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' } }; http://172.25.121.8:8080/md/test.md?print=1 React 4/33
5. 2019/1/17 react思考 - By 曹毅 思考: Vue 模板语法最终转为 render 语法 react 与vue 对模板语法处理不同 <h1>{{ blogTitle }}</h1> render: function (createElement) { return createElement('h1', this.blogTitle) } http://172.25.121.8:8080/md/test.md?print=1 5/33
6. react思考 - By 曹毅 2019/1/17 组件创建 1. 2. 3. 4. function React.createClass extends React.Component extends React.PureComponent 思考: 对比Vue组件创建 组件创建到底做了哪些事? - 状态 模板 事件 http://172.25.121.8:8080/md/test.md?print=1 6/33
7. react思考 - By 曹毅 2019/1/17 组件的states和props 1. states vs props 很容易将所有的数据都放在states中,一般只把引起U 在states中 2. setState()——异步过程 思考: 对比 vue vs react {:&.rollIn} setState()实现原理 http://172.25.121.8:8080/md/test.md?print=1 7/33
8. 2019/1/17 react思考 - By 曹毅 vue render函数 http://172.25.121.8:8080/md/test.md?print=1 8/33
9. 2019/1/17 react思考 - By 曹毅 生命周期 http://172.25.121.8:8080/md/test.md?print=1 9/33
10. react思考 - By 曹毅 2019/1/17 思考: vue与react生命周期不同 react 中异步数据是 componentWillMount vs componentDidUpdate - componentWillMount 会在组件render之前执行 都只执行一次 http://172.25.121.8:8080/md/test.md?print=1 10/33
11. 2019/1/17 react思考 - By 曹毅 事件(交互) 基本语法糖 参数传递 event对象 http://172.25.121.8:8080/md/test.md?print=1 11/33
12. 2019/1/17 react思考 - By 曹毅 事件——基本语法糖 <!--html--> <button onclick="activateLasers()"> Activate Lasers </button> <!-- React: - React JSX <button onClick={activateLasers}> Activate Lasers </button> (DOM <!-- vue --> <div id="example-2"> <!-- `greet` --> <button v-on:click="greet">Greet</button> </div> http://172.25.121.8:8080/md/test.md?print=1 12/33
13. 2019/1/17 react思考 - By 曹毅 思考: 对比 原生,react, vue之间区别(思考实现原理,实现 为什么设计这么不同) 为什么在HTML中监听事件? 1. react组件和vue模板本质是JavaScript 2. 最核心是,因为组件系统,将模板文件抽的很小,复杂 http://172.25.121.8:8080/md/test.md?print=1 13/33
14. 2019/1/17 react思考 - By 曹毅 事件——参数传递 <!--1. event 2.this --> <button onclick="console.log(event.type)"> click me </button> // 1 function handleClick(e) { console.log(e); } return ( <button onClick={handleClick}> Click me </button> ); // 2—— this <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>// <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button> // react vue this <div id="example-3"> <button v-on:click="say('hi', $event)">Say hi</button> <button v-on:click="say('what', $event)">Say what</button> </div> http://172.25.121.8:8080/md/test.md?print=1 14/33
15. react思考 - By 曹毅 2019/1/17 思考:为什么语法会如此之不同,特别是 vue , reac http://172.25.121.8:8080/md/test.md?print=1 15/33
16. 2019/1/17 react思考 - By 曹毅 事件——event对象 原生Event preventDefault() // stopPropagation() // React Event 对象 1. 是一个合成事件。React 根据 W3C spec 来定义 件,所以你不需要担心跨浏览器的兼容性问题。 2. e.nativeEvent //得到原生事件对象 Vue // v-on .stop .prevent .capture .self .once .passive http://172.25.121.8:8080/md/test.md?print=1 16/33
17. react思考 - By 曹毅 2019/1/17 一般开发流程 很大难点是——将prd转换为组件系 可以简单将jquery时代页面理解为一个页面就是一个大组件 http://172.25.121.8:8080/md/test.md?print=1 17/33
18. react思考 - By 曹毅 2019/1/17 一般开发流程 1. 确定原型与JSON接口 2. 按照UI抽组件(边界问题) 3. 用React创建一个静态版本 只有props,而不适用State 自底向上(较大) 自顶而下(较小) 4. 设置state(最小原则) props vs state 5. 确定State位于哪个组件(一般是父子) 6. 添加子向父的数据流 http://172.25.121.8:8080/md/test.md?print=1 18/33
19. 2019/1/17 react思考 - By 曹毅 组件深入 组件之间通信(组件之间关系) 组件抽象与复用 ref及DOM操作 http://172.25.121.8:8080/md/test.md?print=1 19/33
20. 2019/1/17 react思考 - By 曹毅 组件之间通信 1. 2. 3. 4. http://172.25.121.8:8080/md/test.md?print=1 父子 兄弟 祖孙 任意组件 20/33
21. 2019/1/17 react思考 - By 曹毅 组件之间通信-父子 父->子 [子—>父] http://172.25.121.8:8080/md/test.md?print=1 21/33
22. 2019/1/17 react思考 - By 曹毅 组件之间通信-祖孙(Context) // theme Context, theme light const ThemeContext = React.createContext('light'); function ThemedButton(props) { // ThemedButton context theme return ( <ThemeContext.Consumer> {theme => <Button {...props} theme={theme} />} </ThemeContext.Consumer> ); } // function Toolbar(props) { return ( <div> <ThemedButton /> </div> ); } class App extends React.Component { render() { return ( <ThemeContext.Provider value="dark"> <Toolbar /> </ThemeContext.Provider> ); } } http://172.25.121.8:8080/md/test.md?print=1 22/33
23. react思考 - By 曹毅 2019/1/17 组件之间通信-兄弟 class Container extends Component { setValue = value => { this.setState({value}) } render() { return ( <div> <A setValue={this.setValue}/> <B value={this.state.value} /> </div> ); } } // A class A extends Component { handleClick = () => { const { setValue } = this.props; setValue(this.value); } render() { return ( <div className="card"> Brother A, <input onChange={this.handleChange} /> <div className="button" onClick={this.handleClick}> </div> ) } } // B const B = props => (...); export default B; http://172.25.121.8:8080/md/test.md?print=1 </div> 23/33
24. 2019/1/17 react思考 - By 曹毅 组件之间通信-任意组件间 共同祖先 观察者模式 第三方状态管理 http://172.25.121.8:8080/md/test.md?print=1 24/33
25. 2019/1/17 react思考 - By 曹毅 组件抽象复用 通用 灵活 高内聚 低耦合 继承 vs 组合 高阶组件 Render Props Hooks http://172.25.121.8:8080/md/test.md?print=1 25/33
26. react思考 - By 曹毅 2019/1/17 继承 vs 组合 继承是 A is B (子类必须是父类,子类是父类更 组合是 A has B (拥有) http://172.25.121.8:8080/md/test.md?print=1 26/33
27. 2019/1/17 react思考 - By 曹毅 高阶组件 创建方式 - 调用传入的组件 - 继承传入组件 - 装饰器模式 http://172.25.121.8:8080/md/test.md?print=1 27/33
28. react思考 - By 曹毅 2019/1/17 高阶组件创建 export default simpleHoc = WrappedComponent => { console.log('simpleHoc'); return class extends Component { render() { return <WrappedComponent {...this.props}/> } } } // class Usual extends Component{} export default simpleHoc(Usual); export default simpleHoc2 = WrappedComponent => { console.log('simpleHoc'); return class extends WrappedComponent { } } // class Usual extends Component{} export default simpleHoc2(Usual); import React, { Component } from 'react'; import simpleHoc from './simple-hoc'; @simpleHoc export default class Usual extends Component { render() { return ( <div> Usual </div> ) } } http://172.25.121.8:8080/md/test.md?print=1 vue mixin 28/33
29. 2019/1/17 react思考 - By 曹毅 vue mixin var mixin = { data: function () { return { message: 'hello', foo: 'abc' } } } new Vue({ mixins: [mixin], data: function () { return { message: 'goodbye', bar: 'def' } }, created: function () { console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" } } }) http://172.25.121.8:8080/md/test.md?print=1 29/33
30. 2019/1/17 react思考 - By 曹毅 Render Props 跟踪鼠标位置-对比 http://172.25.121.8:8080/md/test.md?print=1 30/33
31. react思考 - By 曹毅 2019/1/17 Render Props 跟踪鼠标位置——高阶组件 // If you really want a HOC for some reason, you can easily // create one using a regular component with a render prop! function withMouse(Component) { return class extends React.Component { render() { return ( <Mouse render={mouse => ( <Component {...this.props} mouse={mouse} /> )}/> ); } } } class Car extends Component{} exprot withMouse(Car) http://172.25.121.8:8080/md/test.md?print=1 31/33
32. react思考 - By 曹毅 2019/1/17 ref及DOM操作 大多数情况下,不需要直接操作DOM。ref提供了操作D function CustomTextInput(props) { // textInput ref let textInput = null; function handleClick() { textInput.focus(); } return ( <div> <input type="text" ref={(input) => { textInput = input; }} /> <input type="button" value="Focus the text input" onClick={handleClick} /> </div> ); } http://172.25.121.8:8080/md/test.md?print=1 32/33
33. 2019/1/17 react思考 - By 曹毅 后续 状态管理 代码分割 性能优化 服务端渲染 http://172.25.121.8:8080/md/test.md?print=1 33/33

相关幻灯片