进击的react - https://zhuanlan.zhihu.com/advancing-react
面试中问什么react问题 - https://zhuanlan.zhihu.com/p/28176065
入门级问题
- 什么是JSX
- state 和 props 有什么区别
- React 是哪个公司贡献的开源代码
进阶级问题
什么时候应该选择用class实现一个组件，什么时候应该用一个函数实现一个组件
能描述一下React组件的各个声明周期函数吗
什么是shouldComponentUpdate函数？有什么作用
当组件的setSatate函数被调用之后，会发生什么
为什么我们利用循环产生的组件中要用key这个特殊的psop
高手级问题
setState可以接受函数作为参数吗？有什么作用
什么是HoC（Higher-Order Component）?适用于什么场景
什么是Fiber？是为了解决什么问题
两个并不是父子关系的组件，如何实现相互的消息传递？请想出尽量多的办法，并说说各自的优缺点
如果你能够改进React的一样功能，那会是哪一个功能
React新的前端思维方式
1 - 如何初始化一个React项目
// 全局安装快速来发React应用的工具
npm install --global create-react-app
// 在当前目录下创建指定参数名的应用目录
create-react-app first_react_app
cd first_react_app
npm start
2 - 如何创建一个React组件(能完成某个特定功能的独立的可重用的代码)
- 定义组件
// 从reacr 库中引入React 和 Component
import React, { Component } from 'react';
// 使用ES6的语法来构建组件类，Component作为所有组件的基类，提供了很多组件共有的功能
class ClickCounter extends Component {}
- 导入组件
// import是ES6语法中导入文件模块的方式，
// 兼容性问题，ES6语法的JavaScript代码会被webpack 和 babel 转译成所有浏览器都支持的ES5语法
import ClickCounter from './ClickCounter'
- 定义组件的方式
- React.createClass方式创建组件类，这种方法已经被废弃了
- 使用ES6的语法来构建组件类
3 - JSX
-
什么是JSX
- JSX是JavaScript的语法扩展，让我们在JavaScript中可以编写想HTML一样的代码
-
JSX 和 HTML 有什么区别
- JSX中使用的 “元素”不局限于HTML中的元素,可以是任何一个React组件
- React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写
- 在JSX中可以通过onClick这样的方式给一个元素添加事件处理函数，在HTML中不建议
-
JSX是进步还是倒退
- HTML代表内容，CSS代表样式，JavaScript定义交互行为，实际上是把不同的技术分来管理了，而不是逻辑上的“分而治之”
- 做同一件事的代码应该有高耦合性的设计原则
-
JSX中使用onClick添加事件处理函数和HTML的onclick有很大的不同
- HTML中的onclick添加的事件处理函数是在全局环境下执行的，这污染了全局环境
- HTML中给很多DOM元素添加onclick事件，可能会影响网页的性能，毕竟，网页需要的事件处理函数越多，性能就会越低
- HTML中对于使用onclick的DOM元素，如果要动态的从DOM树中删除掉的话，需要把对应的事件处理器注销，否则内存泄漏
- JSX中一个组件使用了onClick，并没有产生直接使用onclick的HTML，而是使用了事件委托的方式处理点击事件，无论有多少个onClick出现，其实最后都只在DOM书上添加了一个事件处理点击事件，挂在最顶层的DOM节点上
- 所有的点击事件都被这个事件处理函数捕获，然后根据具体组件分配给特定函数，使用事件委托的性能当然要比为每个onClick都挂载一个事件处理函数要高
- React控制组件的生命周期，在unmount的时候清除相关事件处理函数
4 - React的工作方式
-
jQuery如何工作
- 选中一些DOM元素，然后对这些元素做一些操作
-
React的理念
渲染。React的工作方式把开发者从繁琐的操作中解放出来，开发者只需要关心“我想要显示什么”，而不用操心“怎么去做”
UI=render(data)。用户看到的界面(UI)，应该是一个函数(render)的执行结果，只接受数据(data)作为参数
纯函数。指的是没有任何副作用，输出完全依赖于输入的函数，两次函数调用如果输入相同，得到的结果也绝对相同。
通过数据驱动渲染，重复渲染来实现用户交互，这样重复渲染的效率会不会太低了呢？
-
Virtual DOM
React利用Virtual DOM，让每次渲染都只重新渲染最少的DOM元素
浏览器为了渲染HTML格式的网页，会先将HTML文本解析以构建DOM树，然后根据DOM树渲染出用户看到的界面，当要改变界面内容的时候，就去给编DOM树上的节点
尽量减少DOM操作。DOM操作会引起浏览器对网页进行重新布局，重新绘制，影响性能
DOM树是对HTML的抽象，Virtual DOM就是对DOM树的抽象。Virtual DOM不会触及浏览器的部分，只是存在于JavaScript空间的树形结构，每次自上而下渲染React组件时，会对比这一次产生的Virtual DOM和上一次渲染的Virtual Dom，对比就会发现差别，然后修改真正的DOM树时就只需要触及差别中的部分就行