react新特性有哪些？
Hooks原理？
diff算法原理？key的作用？
props和state有什么区别？
react新的生命周期方法？调用顺序？
初始化阶段：
constructor()
static getDerivedStateFromProps(props, state)
它应返回一个对象来更新 state
render()
componentDidMount()
//UNSAFE_componentWillMount()
更新阶段：
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate(prevProps, prevState)
它使得组件能在发生更改之前从 DOM 中捕获一些信息
componentDidUpdate()
//UNSAFE_componentWillUpdate()
//UNSAFE_componentWillReceiveProps()
卸载阶段：
componentWillUnmount()
抛出错误：
static getDerivedStateFromError()
componentDidCatch()
生命周期触发是同步还是异步的？
父子组件生命周期执行顺序？
-
- 挂载阶段
-
- 更新阶段
componentWillReceiveProps()在哪个阶段执行？
-
- componentWillReceiveProps在每次rerender时都会调用，无论props变了没
- 引发当前组件更新 && (context发生变化 || 父组件render结果发生变化，即当前组件需要rerender)
static getDerivedStateFromProps()执行时机？
-
- 在首次渲染时也会调用
- 更新流程中，在shouldComponentUpdate之前调用，只要走进更新流程（无论更新原因是props change还是state change），就会触发
componentWillUpdate可以直接修改state的值吗？
当调用 setState 时，实际上会执行 enqueueSetState 方法，
并对 partialState 以及_pendingStateQueue 更新队列进行合并操作，
最终通过 enqueueUpdate 执行 state 更新。
而 performUpdateIfNecessary 方法会获取
_pendingElement、_pendingStateQueue、_pendingForceUpdate，
并调用 receiveComponent 和 updateComponent 方法进行组件更新。
如果在 shouldComponentUpdate 或 componentWillUpdate 方法中调用 setState ，此时
this._pendingStateQueue != null，则 performUpdateIfNecessary 方法就会调用 updateComponent
方法进行组件更新，
但 updateComponent 方法又会调用 shouldComponentUpdate 和 componentWillUpdate 方法，
因此造成循环调用，使得浏览器内存占满后崩溃，
为什么要废弃componentWillReceiveProps改用static getDeriveStateFromProps？
React、vue有何不同？
React有何优势与缺点？
React如何实现双项数据绑定？
-
- onChange事件 + state结合
setState()原理，调用过程？
在React的setState函数实现中，会根据一个变量 isBatchingUpdate 来判断是直接同步更新this.state还是放到队列中异步更新 。
React使用了事务的机制，React的每个生命周期和合成事件都处在一个大的事务当中。
在事务的前置钩子中调用batchedUpdates方法修改isBatchingUpdates变量为true，
在后置钩子中将变量置为false。
原生绑定事件和setTimeout异步的函数没有进入到React的事务当中，或者当他们执行时，刚刚的事务已近结束了，
后置钩子触发了，所以此时的setState会直接进入非批量更新模式，表现在我们看来成为了同步SetState。
Webpack配置项？Babel
Jsx原理
JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。
React.js 可以用 JSX 来描述你的组件长什么样的。
JSX 在编译的时候会变成相应的 JavaScript 对象描述。
react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。
React性能优化？
-
- shouldComponentUpdate
- 使用PureComponent
- 使用React.memo()
- immutable
-
-
- 不可变：一旦创建，一个集合便不能再被修改。
- 持久化：对集合进行修改，会创建一个新的集合。之前的集合仍然有效。
- 结构共享：新的集合会尽可能复用之前集合的结构，以最小化拷贝操作来提高性能
-
-
- react-immutable-render-mixin，实现装饰器简化很多写法
- 无状态组件
- 高阶组件
如何封装高阶组件
Component VS PureComponent?
对于PureComponent而言，当其props或者state改变之时，新旧props与state将进行浅对比（shallow comparison）。另一方面，Component默认的情况下其shouldComponentUpdate方法并不进行新旧props与state的对比。
那么，此处提及的shallow comparison究竟是什么呢？
对于基本类型(primitives），例如数字或者布尔值，来说，浅拷贝将会检查其值是否相同，例如1与1相等，true与true相等。对于引用类型的变量，例如复杂的javascript对象或者数组，来说，浅拷贝将仅仅检查它们的引用值是否相等。这意味着，对于引用类型的变量来说，如果我们只是更新了其中的一个元素，例如更新了数组中某一位置的值，那么更新前后的数组仍是相等的。
因此意味着相比于Component，PureCompoent的性能表现将会更好。但使用PureCompoent要求满足如下条件：
-
-
- props和state都必须是不可变对象（immutable object）。
- props和state不能有层级嵌套的结构，（否则对子层级的改变无法反映在浅拷贝中）。
- 如果数据改变无法反应在浅拷贝上，则应该调用forceUpdate来更新Component。
- 一个PureComponent的子Component也应当是PureComponent。
-
React中如何使用react router？
React中为什么不使用mixin?
说说你对React的渲染原理的理解？
JSX代码经过babel编译之后变成React.createElement的表达式，这个表达式在render函数被调用的时候执行生成一个element。
在首次渲染的时候，先去按照规则初始化element，接着ReactCompositeComponentWrapper通过递归，最终调用ReactDOMComponent的mountComponent方法来帮助生成真实DOM节点。
父组件如何调用子组件里的方法？
-
- 通过向子组件传入方法（方法实现:把子组件实例绑定到父组件实例的某个自定义属性上）
- 在子组件中将触发父组件中的方法并传入this
- 父组件中通过this可以调用到子组件中的方法
为什么在react类组件中需要绑定this？
在 React 的类组件中，当我们把事件处理函数引用作为回调传递过去，如下所示：
<button type="button" onClick={this.handleClick}>Click Me</button>
事件处理程序方法会丢失其隐式绑定的上下文。当事件被触发并且处理程序被调用时，this的值会回退到默认绑定，即值为 undefined，这是因为类声明和原型方法是以严格模式运行。
当我们将事件处理程序的 this 绑定到构造函数中的组件实例时，我们可以将它作为回调传递，而不用担心会丢失它的上下文。
箭头函数可以免除这种行为，因为它使用的是词法 this 绑定，会将其自动绑定到定义他们的函数上下文。
