admin 管理员组文章数量: 887021
2024年1月10日发(作者：unicode编码多少个字符)
1. 当你调用 setState 的时候，发生了什么事？
将传递给 setState 的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的 react 元素树，与上一个元素树进行对比（ diff ），从而进行最小化的重渲染。
2. React 项目用过什么脚手架（本题是开放性题目）
creat-react-app Yeoman 等
3.什么时候在功能组件( Class Component )上使用类组件( Functional Component )？
如果您的组件具有状态( state ) 或 生命周期方法，请使用 Class 组件。否则，使用功能组件
中 keys 的作用是什么？
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
render () {
return (
- {item}
{(({item, key}) => {
return
})}
)
}
在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在
React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助
Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中
Key 的重要性。
优势
1、React 速度很快：它并不直接对 DOM 进行操作，引入了一个叫做虚拟 DOM
的概念，安插在 javascript 逻辑和实际的 DOM 之间，性能好。
2、跨浏览器兼容：虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的 API，甚至在 IE8 中都是没问题的。
3、一切都是 component：代码更加模块化，重用代码更容易，可维护性高。
4、单向数据流：Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构，它随着 React 视图库的开发而被 Facebook 概念化。
5、同构、纯粹的 javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行，预渲染你的应用有助于搜索引擎优化。
6、兼容性好：比如使用 RequireJS 来加载和打包，而 Browserify 和 Webpack
适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
很多个 setState 为什么是执行完再 render
diff 原理（常考，大厂必考）
把树形结构按照层级分解，只比较同级元素。
给列表结构的每个单元添加唯一的 key 属性，方便比较。
React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） 合并操作，调用 component 的 setState 方法的时候, React 将其标记为
dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
生命周期函数
•
初始化阶段：
o
o
o
o
o
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后
•
运行中状态：
o
o
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
o
o
o
•
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
销毁阶段：
o
componentWillUnmount:组件即将销毁
解析：有三大阶段，每阶段的细分 5-5-1
ComponentUpdate 是做什么的？（react 性能优化是哪个周期函数？）
shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在
shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。
10.为什么虚拟 dom 会提高性能?(必考)
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的
DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1
所构建的真正的 DOM 树上，视图就更新了。
11. React 中 refs 的作用是什么？
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：
class CustomForm extends Component {
handleSubmit = () => {
("Input Value: ", );
};
render() {
return (
);
}
}
上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收
input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：
function CustomForm({ handleSubmit }) {
let inputElement;
return (
);
}
te 和 replaceState 的区别
setState 是修改其中的部分状态，相当于 ，只是覆盖，不会减少原来的状态
replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了
有什么缺点
•
一个组件所需要的数据，必须由父组件传过来，而不能像 flux 中直接从
store 取。
•
当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新 render，可能会有效率影响，或者需要写复杂的
shouldComponentUpdate 进行判断。
14.简述 flux 思想
Flux 的最大特点，就是数据的"单向流动"。
1. 用户访问 View
2. View 发出用户的 Action
3. Dispatcher 收到 Action，要求 Store 进行相应的更新
4. Store 更新后，发出一个"change"事件
5. View 收到"change"事件后，更新页面
15.了解 redux 么，说一下 redux 吧
•
redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer
进行 state 操作，view 通过 store 提供的 getState 获取最新的数据，flux 也是用来进行数据操作的，有四个组成部分 action，dispatch，view，store，工作流程是 view 发出一个 action，派发器接收 action，让 store
进行数据更新，更新完成以后 store 发出 change，view 接受 change
更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store，在 Flux 中 dispatcher 被用来传递数据到注册的回调事件，但是在 redux 中只能定义一个可更新状态的 store，redux 把
store 和 Dispatcher 合并,结构更加简单清晰
•
新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们
中有三种构建组件的方式
Class()、ES6 class 和无状态函数。
组件的划分业务组件技术组件？
•
•
•
根据组件的职责通常把组件分为 UI 组件和容器组件。
UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
两者通过 React-Redux 提供 connect 方法联系起来。
18.描述事件在 React 中的处理方式
为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递
SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。
这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。有趣的是，React 实际上并没有将事件附加到子节点本身。React
将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的，这也意味着在更新 DOM 时，React 不需要担心跟踪事件监听器。
19. 应该在 React 组件的何处发起 Ajax 请求
在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
20.(在构造函数中)调用 super(props) 的目的是什么
在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在
constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 。
21.除了在构造函数中绑定 this，还有其它方式吗
你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。
22.为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
因为 和 的更新可能是异步的，不能依赖它们的值去计算下一个 state。
23.何为高阶组件(higher order component)
高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为。如果
你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。
24.何为受控组件(controlled component)
在 HTML 中，类似
,