React相关知识点

一、什么是 React?
- 官方解释：用于构建用户界面的 JavaScript 库。是一个将数据渲染为 HTML 视图的开源 JavaScript 库。
- 1.发送请求获取数据
- 2.处理数据（过滤、整理格式等）
- 3.操作 DOM 呈现页面
二、为什么要学？
- 原生 JavaScript 操作 DOM 繁琐，效率低；（DOM-API 操作UI）
- 使用 JavaScript 直接操作 DOM ,浏览器会进行大量的重绘重排；
- 原生 JavaScript 没有组件化编码方案，代码复用率低；
三、React 的特点：
- 1.采用组件化模式、声明式编码，提高开发效率及组件复用率；
- 2.在 React Native 中使用 React 语法进行移动端开发；
- 3.使用虚拟 DOM + 优秀的 Diffing 算法，尽量减少与真实 DOM 的交互；
四、React高效的原因
- 1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
- 2. DOM Diffing算法, 最小化页面重绘。
五、todoList案例相关知识点
- 1.拆分组件、实现静态组件，注意：className style 的写法；
- 2.动态初始化列表，如何确定将数据放在哪个组件的state中？
* 某个组件使用：放在其自身的state中；
* 某些组件使用：放在它们共同的父组件state中，（官方称此操作为：状态提升）
- 3.关于父子之间通信：
* 【父组件】给【子组件】传递数据：通过 props 传递；
* 【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数；
- 4.注意 defaultChecked（只有在第一次指定时起作用） 和 checked 的区别，类似的还有：defaultValue 和 value;
- 5.状态在哪里，操作状态的方法就在哪里；
六、经典面试题：
（1）react/vue 中的 key 有什么作用？（key 的内部原理是什么？）
（2）为什么遍历列表时，key 最好不要用 index？
1.虚拟 DOM 中 key 的作用：
（1）简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。
（2）详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，
随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
若虚拟DOM中内容没变，直接使用之前的真实DOM；
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM；
b. 旧虚拟DOM中未找到与新虚拟DOM相同的key：
根据数据创建新的真实DOM，随后渲染到页面；
2.用index作为key可能会引发的问题：（建议使用唯一标识id作为key）
a.若对数据进行：逆序添加、逆序删除等破坏顺序的操作：
会产生没有必要的真实DOM更新 =》 页面效果没问题，但效率低。
b.如果结构中还包含输入类的DOM：
会产生错误的DOM更细=》界面有问题
c.注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，
仅用于渲染列表用于展示，使用index作为key是没有问题的。
七、消息订阅与发布

八、github搜索案例相关知识点

九、路由的基本使用
- 明确好界面中的导航区、展示区；
- 导航区的a标签改为Link标签；
Demo
- 展示区写Route标签进行路径的匹配；

- 的最外侧包裹了一个或
十、路由组件与一般组件
- 1.写法不同：
* 一般组件：
* 路由组件：
- 2.存放位置不同：
* 一般组件：components
* 路由组件：pages
- 3.接收到的 props 不同：
* 一般组件：写组件标签时传递了什么，就能收到什么；
* 路由组件：接收到如下三个属性
十一、NavLink 与封装 NavLink
- 1.NavLink 可以实现路由链接的高亮，通过 activeClassName 指定样式名；
- 2.标签体内容是一个特殊的标签属性；
- 3.通过 this.props.children可以获取组件标签体内容；
十二、Switch 的使用
- 1.通常情况下，path 和 component 是一一对应关系；
- 2.Switch 可以提高路由匹配效率（单一匹配）；
十三、解决样式丢失问题的3中办法
public 文件夹中的 index.html 文件

十四、路由的严格匹配与模糊匹配
- 1.默认使用的是模糊匹配，（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）；
- 2.开启严格匹配： ；
- 3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法匹配二级路由；
十五、 Redirect 的使用
- 1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到 Redirect 指定的路由；
- 2.具体编码：

十六、嵌套路由
- 1.注册子路由时要写上父路由的path值；
- 2.路由的匹配是按照注册路由的顺序进行的；

十七、向路由组件传递参数
- 1.params 参数：
* 路由链接（携带参数）：/demo/test/tom/18}>{详情}
* 注册路由（声明接收）：
* 接收参数： const {name,age } = this.props.match.params


- 2.search参数
* 路由链接（携带参数）：/demo/test?name=tom&age=18}>详情
* 注册路由（无需声明，正常注册即可）：
* 接收参数：this.props.location.search
* 备注：获取到的 search 是 urlencoded 编码字符串，需要借助 querystring 解析


- 3.state 参数
* 路由链接（携带参数）：详情
* 注册路由（无需声明，正常注册即可）：
* 接收参数：this.props.location.state
* 备注：刷新也可以保留住参数


十八、编程式路由导航
- 借助 this.props.history 对象上的 API 操作路由 跳转、前进、后退
* this.props.history.push()
* this.props.history.replace()
* this.props.history.goBack()
* this.props.history.goForward()
* this.props.history.go()
十九、withRouter 的使用（withRouter 是一个函数，不是一个组件，所以import时首字母要小写）

二十、BrowserRouter 和 HashRouter 的区别：
- 1.底层原理不一样：
* BrowserRouter 使用的是 H5 的 history API ，不兼容 IE9及以下版本；
* HashRouter 使用的是 URL 的哈希值；
- 2.url 表现形式不一样：
* BrowserRouter 的路径中没有 # ，例如：localhost:3000/demo/test
* HashRouter 的路径中包含 # ，例如：localhost:3000/#/demo/test
- 3.刷新后对路由 state 参数的影响：
* BrowserRouter 没有任何影响，因为 state 保存在 history 对象中；
* HashRouter 刷新后会导致路由 state 参数的丢失；
- 4.备注：HashRouter 可以用于解决一些路径错误相关的问题；
二十一、antd 的按需引入 + 自定主题
- 1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
- 2.修改 package.json

- 3.根目录下创建 config-overrides.js
// 配置具体的修改规则
const { override, fixBabelImports, addLessLoader } = require(‘customize-cra’);
module.exports = override(
fixBabelImports(‘import’, {
libraryName: ‘antd’,
libraryDirectory: ‘es’,
style: true,
}),
addLessLoader({
lessOption: {
javascriptEnabled: true,
modifyVars: { ‘@primary-color’: ‘orange’ },
}
}),
);

- 4.备注：不用在组件里亲自引入样式了，即：import ‘antd/dist/antd.css’ 应该删掉
二十二、redux


二十三、路由懒加载