Reactjs系列二reactjs进阶须知

前言

上一节复习reactjs的基础知识，本节主要了解reactjs中一些高阶用法。

新概念hook

简介

什么是hook：可让你在不编写 class 的状况下使用 state 以及其余的 React 特性。而且彻底向后兼容，对老项目没有多大影响。

为何要使用hook：

• 在reactjs提倡使用函数式编程，而hook能够在函数中使用state等类中才能使用的属性
• 解决了在组件之间复用状态逻辑很难
• 解决了class编写的组件难以理解，以及编译较慢的问题

hook使用规则

• 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
• 只能在 React 的函数组件中调用 Hook。

高阶组件（HOC）

• 概念：是基于reactjs的组合特性而造成的一种设计模式。
• 与普通组件的区别：组件是将 props 转换为 UI，而高阶组件是将组件转换为另外一个组件。
• 与类组件的区别：类组件有生命周期，this，state。高阶组件没有。另外类组件须要实例化更占用内存。
• 优势：HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 经过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有反作用。

注意事项（先记着不要这样写，缘由咱们下节在讲）

• 不要在 render 方法中使用 HOC：这个我看了几遍官方文档才明白缘由。
• 务必复制静态方法：请使用使用 hoist-non-react-statics
• Refs 不会被传递

虚拟dom概念简介

• 概念：将Dom元素以相应的Object对象数据格式化来进行页面渲染，此种Object对象称为虚拟DOM。
• 特色：实现页面局部刷新大大节省了浏览器的内存空间。
• 技术难点：Dom的diff算法
• reactjs实现：生成vNode---->渲染成真实节点 --------->挂载到页面--------->diff比较
• diff算法：当页面更新时会产生新对象，比较新旧对象区别的算法咱们称为diff算法，其也是实现视图局部更新的基础

单元测试简介（后面会有单独的章节来谈这块）

• 常见测试工具：Jest，Enzyme
• Jest简介：Jest是 Facebook 发布的一个开源的、基于 Jasmine 框架的 JavaScript单元测试工具。
• Enzyme简介：Airbnb开源的React测试类库

相关生态简介

• redux简介：Redux是一个数据状态管理插件。
• mobx简介：与redux同样是兼容reactjs实现全局状态的存储和管理。
• react-router简介：reactjs项目中前端路由的控制。
• reactjs相关ui库：Material-UI、Ant-design ...

其余

设置按需加载UI库

• react-app-rewire和customize-cra在配置文件config-overrides.js

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
   }),
);
复制代码

create-react-app环境变量配置

• create-react-app提供了接口eject，能够自定义配置文件

//项目根目录运行
  npm run eject
复制代码

• 第一种方法是不可逆的不建议使用，可使用npm包react-app-rewire增长.env.文件

//package.json文件中
react-scripts start --mode ***//指定环境
复制代码

总结

本节主要介绍了深刻了解reactjs须要掌握的知识点，下面的章节主要都是围绕这块进行展开。