react

react
你的技术栈主要是react，那你说说你⽤react有什么坑点？
1、JSX做表达式判断时候，需要强转为boolean类型，如：
render() {
 const b = 0;
 return <div>
 {
 !!b && <div>这是⼀段⽂本</div>
 }
 </div>
}
如果不使⽤ !!b 进⾏强转数据类型，会在⻚⾯⾥⾯输出 0。

2、尽量不要在 componentWillReviceProps ⾥使⽤ setState，如果⼀定要使⽤，那么需要判断结束条
件，不然会出现⽆限重渲染，导致⻚⾯崩溃。(实际不是componentWillReviceProps会⽆限重渲染，⽽
是componentDidUpdate)
3、给组件添加ref时候，尽量不要使⽤匿名函数，因为当组件更新的时候，匿名函数会被当做新的prop
处理，让ref属性接受到新函数的时候，react内部会先清空ref，也就是会以null为回调参数先执⾏⼀次
ref这个props，然后在以该组件的实例执⾏⼀次ref，所以⽤匿名函数做ref的时候，有的时候去ref赋值
后的属性会取到null
4、遍历⼦节点的时候，不要⽤ index 作为组件的 key 进⾏传⼊
怎么去设计⼀个组件封装
组件封装的⽬的是为了重⽤，提⾼开发效率和代码质量
低耦合，单⼀职责，可复⽤性，可维护性

react 的虚拟dom是怎么实现的
⾸先说说为什么要使⽤Virturl DOM，因为操作真实DOM的耗费的性能代价太⾼，
所以react内部使⽤js
实现了⼀套dom结构，在每次操作在和真实dom之前，使⽤实现好的diff算法，
对虚拟dom进⾏⽐较，
递归找出有变化的dom节点，然后对其进⾏更新操作。为了实现虚拟DOM，
我们需要把每⼀种节点类
型抽象成对象，每⼀种节点类型有⾃⼰的属性，也就是prop，每次进⾏diff的时候，
react会先⽐较该节
点类型，假如节点类型不⼀样，那么react会直接删除该节点，然后直接创建新的节点插⼊到其中，
假如
节点类型⼀样，那么会⽐较prop是否有更新，假如有prop不⼀样，那么react会判定该节点
有更新，那
么重渲染该节点，然后在对其⼦节点进⾏⽐较，⼀层⼀层往下，直到没有⼦节点

react hooks 原理是什么？
hooks 是⽤闭包实现的，因为纯函数不能记住状态，只能通过闭包来实现

useState 中的状态是怎么存储的？
通过单向链表，fiber tree 就是⼀个单向链表的树形结构```

```javascript
如何遍历⼀个dom树
function traversal(node) {
 //对node的处理
 if (node && node.nodeType === 1) {
 console.log(node.tagName);
 }
 var i = 0,
 childNodes = node.childNodes,
 item;
 for (; i < childNodes.length; i++) {
 item = childNodes[i];
 if (item.nodeType === 1) {
 //递归先序遍历⼦节点
 traversal(item);
 }
 }
}

数据双向绑定单向绑定优缺点
双向绑定是⾃动管理状态的，对处理有⽤户交互的场景⾮常合适，代码量少，
当项⽬越来越⼤的时候，调试也变得越来越复杂，难以跟踪问题
单向绑定是⽆状态的, 程序调试相对容易, 可以避免程序复杂度上升时产⽣的各种问题,
 当然写代码时就没有双向绑定那么爽了

React fiber 的理解和原理
理解
React16 以前
React16 以前，对virtural dom的更新和渲染是同步的。就是当⼀次更新或者⼀次加载开始以
后，diff
virtual dom并且渲染的过程是⼀⼝⽓完成的。如果组件层级⽐较深，相应的堆栈也会很深
，⻓时间占⽤
浏览器主线程，⼀些类似⽤户输⼊、⿏标滚动等操作得不到响应。借Lin的两张图，
视频 A Cartoon
Intro to Fiber - React Conf 2017。

React16 Fiber Reconciler
React16 ⽤了分⽚的⽅式解决上⾯的问题。
就是把⼀个任务分成很多⼩⽚，当分配给这个⼩⽚的时间⽤尽的时候，就检查任务列表中有没有新的、
优先级更⾼的任务，有就做这个新任务，没有就继续做原来的任务。这种⽅式被叫做异步渲染(Async
Rendering)

⼀些原理
Fiber就是通过对象记录组件上需要做或者已经完成的更新，⼀个组件可以对应多个Fiber。 在render函数中创建的React Element树在第⼀次渲染的时候会创建⼀颗结构⼀模⼀样的Fiber节点树。
不同的React Element类型对应不同的Fiber节点类型。⼀个React Element的⼯作就由它对应的Fiber节
点来负责。
⼀个React Element可以对应不⽌⼀个Fiber，因为Fiber在update的时候，会从原来的Fiber（我们称为
current）clone出⼀个新的Fiber（我们称为alternate）。两个Fiber diff出的变化（side effect）记录
在alternate上。所以⼀个组件在更新时最多会有两个Fiber与其对应，在更新结束后alternate会取代之
前的current的成为新的current节点。
其次，Fiber的基本规则：
更新任务分成两个阶段，Reconciliation Phase和Commit Phase。Reconciliation Phase的任务⼲的事
情是，找出要做的更新⼯作（Diff Fiber Tree），就是⼀个计算阶段，计算结果可以被缓存，也就可以
被打断；Commmit Phase 需要提交所有更新并渲染，为了防⽌⻚⾯抖动，被设置为不能被打断。
PS: componentWillMount componentWillReceiveProps componentWillUpdate ⼏个⽣命周期⽅法，
在Reconciliation Phase被调⽤，有被打断的可能（时间⽤尽等情况），所以可能被多次调⽤。其实
shouldComponentUpdate 也可能被多次调⽤，只是它只返回true或者false，没有副作⽤，可以暂时
忽略。
解释 React 中 render() 的⽬的
每个React组件强制要求必须有⼀个 render()。它返回⼀个 React 元素，是原⽣ DOM 组件的表示。如
果需要渲染多个 HTML 元素，则必须将它们组合在⼀个封闭标记内，例如 、 、`` 等。此函数必须保持
纯净，即必须每次调⽤时都返回相同的结果。
调⽤ setState 之后发⽣了什么？
在代码中调⽤ setState 函数之后，React 会将传⼊的参数对象与组件当前的状态合并，然后触发
所谓的调和过程。
经过调和过程，React会以相对⾼效的⽅式根据新的状态构建React元素树并且着⼿重新渲染整个
UI 界⾯。
在 React 得到元素树之后，React 会⾃动计算出新的树与⽼树的节点差异，然后根据差异对界⾯进
⾏最⼩化重渲染。
在差异计算算法中，React 能够相对精确地知道哪些位置发⽣了改变以及应该如何改变，这就保证
了按需更新，⽽不是全部重新渲染

触发多次setstate，那么render会执⾏⼏次？
多次setState会合并为⼀次render，因为setState并不会⽴即改变state的值，
⽽是将其放到⼀个任
务队列⾥，最终将多个setState合并，⼀次性更新⻚⾯。
所以我们可以在代码⾥多次调⽤setState，每次只需要关注当前修改的字段即可
react中如何对state中的数据进⾏修改？setState为什么是⼀个异步的？
修改数据通过this.setState(参数1,参数2)
this.setState是⼀个异步函数
参数1 : 是需要修改的数据是⼀个对象
参数2 : 是⼀个回调函数，可以⽤来验证数据是否修改成功，同时可以获取到数据更新后的
DOM结构等同于componentDidMount
this.setState中的第⼀个参数除了可以写成⼀个对象以外，还可以写成⼀个函数 ！，函数中第⼀
个值为prevState 第⼆个值为prePprops this.setState((prevState,prop)=>({}))
为什么建议传递给 setState的参数是⼀个callback⽽不是⼀个对象？
因为this.props 和this.state的更新可能是异步的，不能依赖它们的值去计算下⼀个state
为什么setState是⼀个异步的？
当批量执⾏state的时候可以让DOM渲染的更快,也就是说多个setstate在执⾏的过程中还需要被合
并

原⽣事件和React事件的区别？
React 事件使⽤驼峰命名，⽽不是全部⼩写。
通过 JSX , 你传递⼀个函数作为事件处理程序，⽽不是⼀个字符串。
在 React 中你不能通过返回 false 来阻⽌默认⾏为。必须明确调⽤ preventDefault 。

React的合成事件是什么？
React 根据 W3C 规范定义了每个事件处理函数的参数，即合成事件。
事件处理程序将传递 SyntheticEvent 的实例，这是⼀个跨浏览器原⽣事件包装器。它具有与浏览器
原⽣事件相同的接⼝，包括 stopPropagation() 和 preventDefault() ，在所有浏览器中他们⼯作
⽅式都相同。
React 合成的 SyntheticEvent 采⽤了事件池，这样做可以⼤⼤节省内存，⽽不会频繁的创建和销毁
事件对象。
另外，不管在什么浏览器环境下，浏览器会将该事件类型统⼀创建为合成事件，从⽽达到了浏览器兼容
的⽬的。
什么是⾼阶组件（HOC）
⾼阶组件是重⽤组件逻辑的⾼级⽅法，是⼀种源于 React 的组件模式。 HOC 是⾃定义组件，在它之内
包含另⼀个组件。它们可以接受⼦组件提供的任何动态，但不会修改或复制其输⼊组件中的任何⾏为。
你可以认为 HOC 是“纯（Pure）”组件。
你能⽤HOC做什么？
HOC可⽤于许多任务，例如：
代码重⽤，逻辑和引导抽象
渲染劫持
状态抽象和控制
Props 控制