React知识点汇总（项目）

React.js学习, 面试题 本文总阅读量次

总结遇到过的性能优化

  • 【构造函数内绑定事件函数this指向】：在constructor函数里绑定 事件函数 的 this指向（bind），而不是在事件函数内绑定，这样可以保证整个程序里只绑定一次，且可以避免 子组件 的无谓渲染。
  • 【渲染列表时加key】（diff算法加快虚拟DOM比对速度）
  • 【自定义DOM事件及时销毁】（ComponentwillUnmount）
    • react事件是挂载在document上的，所以不需要我们进行手动销毁
  • 【异步setState】：React的底层内置的setState是异步的，可以把多次的数据改变结合成一次来做，降低了 虚拟DOM 的比对频率。
  • 【虚拟DOM】：React的底层用了虚拟DOM的概念，替代了之前的 真实的DOM（JS对象）。
  • 【diff算法】：React的 diff算法： 同层比对、key值的运用 来提升 虚拟DOM 比对的速度。
  • 【shouldComponentUpdate/PureComponent避免不必要的子组件render函数的渲染更新】：
    • 借助**生命周期函数shouldComponentUpdate来提高组件性能，避免不必要的子组件render函数的渲染更新**。（例子在“React高级内容（3）”）
      • 更为简单的方法可参考下面的“PureComponent”
    • 让组件继承 react提供的**PureComponent（替代手写shouldComponentUpdate）判断只有和本组件有关的数据更新时，本组件的render函数才执行，否则return false不让组件重新渲染。通过避免虚拟DOM的比对**来提高性能。
    • 函数组件使用 React.memo
    • 记得搭配immutable.js不可变值
  • 【使用react-router-dom库进行路由跳转】：使用react-router-dom的Link组件进行页面跳转，跳转时不会发送HTTP请求，因此加载速度会快很多，借此也可提高性能。
  • 【异步加载组件】：可使用react-loadable模块实现异步加载组件解决首屏加载慢的问题。
  • 【前端通用的性能优化】，如图片懒加载
  • webpack层面的优化（webpack在production环境下进行打包时，就会自动压缩代码至1/3的大小，在浏览器上进行反解析再进行渲染。）
  • 使用SSR服务器端渲染，不需要通过ajax发送请求，减少请求次数达到性能优化，这个需要额外设置。

React中的CSS

  • 比较麻烦，因为官方没有集成方案，也没有推荐具体的方案
  • 但社区方案众多，可以根据需求进行选择
    • css modules
    • （babel）react-css-modules
    • styled components：直接在单独的js文件中将样式写在组件里（也可以修饰现有的组件），然后直接使用带有样式的组件：styled components例子从Div组件可以明确：styled components不仅可生成带样式组件，还可获取组件属性设置特殊样式，例子中就规定了big属性的Div组件字体大小为72px（涉及ES6的模板字符串和变量的使用方法）
    • styled jsx：简单粗暴，在jsx中允许直接写入css
    • css文件+className（不推荐）：可参考简书Header组件开发（styled-components管理样式）

使用antd时用styled-Components修改部分样式

  • 参考方法1：新建一个 styled-components 组件 Test 包裹在想要修改的antd组件外，然后通过从 Test 中操作其子代CSS样式对目标antd组件进行样式修改（给作为子组件的antd组件添加className）。
  • 参考方法2：直接在存放css样式的js文件中输出样式,再在js文件中引入样式并使用即可：
    1
    2
    3
    4
    5
    6
    //css.js
    import  styled  from 'styled-components';

    export const btnStyle = {
    　　background:'pink'
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import React from 'react';
    import { Button } from 'antd'; 
    import { btnStyle } from './style'

    const TodoListUI = (props) => {
        return (
                <Button style={btnStyle}type="danger" onClick={props.handleBtnClick}>提交</Button>
        )
    }
    export default TodoListUI;

路由跳转（react-router-dom的Link组件）

  • 注意：react是 单页应用的跳转，也就是说，不管怎么进行页面跳转，整个网站只会加载一次html文件，这也就决定了不能使用<a>标签进行页面跳转。
    • 如果使用<a>标签进行页面跳转，跳转时会发送HTTP请求。
      而借助react-router-dom的Link组件实现跳转则不会，因此加载速度会快很多，借此也可提高性能。
  • react-router-dom的Link组件 例子

路由传值

  • 可参考react-router-dom的使用
  • 个人觉得，【react的url中传递参数值】组件的跳转路径上最好使用/:参数值的方法传值，这样组件中可以直接使用this.props.match.params.参数名获取所传参数值。【react将参数值传递给node】在react的组件的action中通过ajax请求的路径中使用?key=value来传值，这样在node中通过queryString.parse可直接得到JSON对象

遇到过的问题

  1. 模拟接口数据（Charles抓包/mockjs/public下新建api文件夹）
  2. 路由跳转时 Link组件 必须在router的内部（例子、react-router-dom、react中路由相关知识点）
React.js学习, 面试题