React (3) react 笔记 傷城~ 2021-09-17 01:36 326阅读 0赞 ## 1. react 特点 ## 1. 声名式开发 (可以减少大量操作dom) 2. 可以与其他框架并存 (react 只挂载一个元素上, 其他框架挂用另外元素就行了) 3. 组件化 4. 单项数据流 (父组件操作数据, 子组件调用父组件方法间接改变数据) 5. 视图层框架 (redux, flux, 状态管理库) 6. 函数式编程 (函数式编程更容易实现前端自动化测试) ## 2. render ## 当组件的state或者props发生改变的时候, render函数就会重新运行一次 注意 这里的写法 **import React, \{ Component \} from 'react';** import React, {Component} from 'react'; // 等价于 import React from 'react' const Component = React.Component ## 3. 虚拟dom ## 第 1 次试验 1. state 数据 2. JSX 模板 3. 数据 + 模板 结合, 生成真实的DOM, 来显示 4. state 发生改变 5. 数据 + 模板 结合. 生成真实的DOM, 替换原始的DOM (全部替换) 缺陷: 第一次生成了一个完整的DOM片段 第二次生成了一个完成的DOM片段 第二次的DOM替换第一次的DOM, 非常耗性能 第 2 次改良 : 1. state 数据 2. JSX 模板 3. 数据 + 模板 结合, 生成真实的DOM, 来显示 4. state 发生改变 5. 数据 + 模板 结合. 生成真实的DOM, 并不直接替换原始的DOM 6. 新的DOM(DoucumentFragment) 和原始的DOM 做对比, 找差异 (多了对比这个操作) 7. 找出 input 框发生了变化 8. 只用新的 DOM 中的input元素, 替换掉老的DOM中的input元素 (局部替换) 缺陷: 性能的提升并不明显 第 3 次改良 : 1. state 数据 2. JSX 模板 3. 数据 + 模板 结合, 生成真实的DOM, 来显示 <div id='abc'><span>hello world</span></div> 4. 生成虚拟DOM (虚拟DOM就是一个JS对象, 用它来描述真实DOM) (损耗了性能, 用JS创建JS对象非常简单, 但是用JS创建DOM会复杂 ) \['div', \{id: 'abc'\}, \['span', \{\}, 'hello world'\]\] 5. state 发生改变 6. 数据 + 模板 生成新的虚拟DOM (生成虚拟DOM本质上生成了一个JS 对象, 极大的提升了性能) \['div', \{id: 'abc'\}, \['span', \{\}, 'hello react'\]\] 7. 比较原始虚拟DOM和新的虚拟DOM的区别, 找到区别是span 中内容 (极大的提升了性能) 8. 直接操作DOM, 改变span中的内容 优点: 引入虚拟DOM为什么可以提高性能? **减少了对真实DOM的创建和对真实DOM的对比, 取而代之,创建的都是JS对象, 对比都是JS对象,因此大大的提升了性能** ## 4. 深入了解虚拟DOM ## 1. state 数据 2. JSX 模板 3. 数据 + 模板 结合, 生成虚拟DOM (虚拟DOM就是一个JS对象, 用它来描述真实DOM) (损耗了性能, 用JS创建JS对象非常简单, 但是用JS创建DOM会复杂 ) \['div', \{id: 'abc'\}, \['span', \{\}, 'hello world'\]\] 4. 用虚拟DOM的结构生成真实的DOM, 来显示 <div id='abc'><span>hello world</span></div> 5. state 发生改变 6. 数据 + 模板 生成新的虚拟DOM (生成虚拟DOM本质上生成了一个JS 对象, 极大的提升了性能) \['div', \{id: 'abc'\}, \['span', \{\}, 'hello react'\]\] 7. 比较原始虚拟DOM和新的虚拟DOM的区别, 找到区别是span 中内容 (极大的提升了性能, diff) 8. 直接操作DOM, 改变span中的内容 优点 : 1. 性能提升了 2. 它使得跨端应用得以实现. React Native ## 5. 虚拟DOM diff 算法 ## 同层比对 key值不用index ## 6. ref 操作DOM标签 ## handleBtnClick() { this.setState((prevState) => ({ // 异步函数 list: [...prevState.list, prevState.inputValue], inputValue: '' }), () =>{ console.log(this.ul.querySelectorAll('div').length); }) } ## 7. react 中的生命周期函数 ## * 生命周期函数是指组件运行时, 会在某一时刻**自动执行**的函数 * 生命周期函数执行顺序图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70][] * 生命周期各个部分执行顺序图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1][] ## 8. 性能优化的几个点 ## 1. 在constructor()函数中, 改变函数作用域, 只用写一次, 执行一次 this.func = this.func.bind(this) 2. react底层 setState()函数, 内置了性能提升机制, 是一个异步的函数, 它将多次数据的改变结合成一次来执行 3. react 底层 虚拟DOM 和 同层 key值比较 4. shouldComponentUpdate()生命周期函数, 可以判断数据内容, 判断是否执行render函数 ## 9. ajax 请求 ## 1. 初始化ajax 请求建议放在 生命周期componentDidMount函数里面 只执行一次, 最合适, 其他地方或多或少都有些问题 ## 10. 使用 charles 模拟接口数据 ## 非常详细的教程 [戳这里][Link 1] ## 11. css 过渡动画 ## 1. js 函数 切换类名 2. css3 过渡动画 .show { animation: show-item 2s ease-in forwards; } .hide{ animation: hide-item 2s ease-in forwards; } @keyframes hide-item{ 0% { opacity: 1; color: red; } 50% { opacity: 0.5; color: green; } 100% { opacity: 0; color:blue; } } @keyframes show-item{ 0% { opacity: 0; color: red; } 50% { opacity: 0.5; color: green; } 100% { opacity: 1; color:blue; } } 3. react-transition-group 详细使用 [戳这里][Link 2] import React, { Component } from 'react'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import './style.css' class App extends Component { constructor(props) { super(props) this.state = { list: [] } this.handleToggole = this.handleToggole.bind(this) } render() { return ( <div> <TransitionGroup> { this.state.list.map((item, index) => { return ( <CSSTransition timeout={1000} classNames='fade' unmountOnExit onEntered={(el) => {el.style.color='blue'}} appear={true} > <div key={index}>{item}</div> </CSSTransition> ) }) } </TransitionGroup> <button onClick={this.handleToggole}>toggle</button> </div> ) } handleToggole() { // this.setState({ // show: this.state.show ? false : true // }) this.setState((prevState) => { return { list: [...prevState.list, 'item'] } }) } } export default App; .fade-enter ,.fade-appear{ opacity: 0; } .fade-enter-active, .fade-appear-active{ opacity: 1; transition: opacity 1s ease-in; } .fade-enter-done{ opacity: 1; /* color:blueviolet; */ } .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0; transition: opacity 1s ease-in; } .fade-exit-done { opacity: 0; } [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70]: /images/20210726/12dd85a213bf4839b0102c928d919785.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1]: /images/20210726/b53499a281264a8fabd350a560b27a09.png [Link 1]: https://www.jianshu.com/p/fb2bdde5b498 [Link 2]: https://reactcommunity.org/react-transition-group/css-transition
还没有评论,来说两句吧...