1.React的严格模式如何使用，有什么用处？
2.在React中遍历的方法有哪些？
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 （两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性）。Object.values()
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，遍历时需添加key值。
forEach() 方法按照原始数组元素顺序依次处理元素。
map用法：
//用法1:Object.values()获取值进行遍历
Object.values(obj).map(item => item.length)
// 用法2:数据遍历
regionList.map(item => ({
text: item.title,
value: item.value
}))
// 用法3:标签循环遍历
<Select>
{
categoryList.map(item =>
<Option value={item.id} key={item.id}>{item.title}</Option>
)
}
</Select>3.在React中页面重新加载时怎样保留数据
如果您要在浏览器中保存数据，您可以选择以下选项：
- 本地存储
- IndexedDB
- 饼干
- redux 持久化
Client-side storage
对于react，你也可以找到像useLocalStorage（像useState）这样的东西来简化上面的用法，
localStorage写法：
const { username } = JSON.parse(localStorage.getItem("token"))也可以通过redux持久化进行数据存储
4.React必须使用JSX吗。什么是 JSX ？
不一定，也可以使用React.createElement()
JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签
JSX是什么？ - 简书一、JSX是什么？ JSX 是 JavaScript 的扩展语法，这种 标签的写法就是 JSX。JSX 编写的组件通...https://www.jianshu.com/p/8fffa523f8ffreact判断一个元素是HTML元素还是react 组件的原则就是看第一个字母是否大写。
5. 为什么使用jsx的组件中没有看到使用react却需要引入react？
本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。
所谓的JSX其实就是JavaScript 对象，所以使用React 和JSX的时候一定要经过编译的过程：
JSX → 使用 React 构造组件，bable 进行编译 → JavaScript 对象 → ReactDOM.render() →DOM元素→插入页面
6. 在React(18)中怎么使用async/await？
在useEffect内的用法：
useEffect(() => {
async function fetchData() {
const res = await axios.get("/xxxxx");
const list = res.data;
setdataSource(list)
}
fetchData()
}, [])7. React.Children.map和js的map有什么区别？
JavaScript中的map不会对为null或者undefined的数据进行处理，而React.Children.map中的map可以处理React.Children为null或者undefined的情况。
React.Children.map 能够处理未知数据类型，即使 React.children 是 null 和 undefined 也能够正确处理。
React.Children.forEach 一样的原理。
var children = null
chidren.map(i => {return i}) // => VM370:1 Uncaught TypeError: Cannot read property 'map' of null
React.Children.map(children, i => {return i;}) // return null8.React 中的高阶组件运用了什么设计模式？（有问题）
高阶组件 如下方的withRouter(对组件内容添加props参数)：React Router 6 函数式组件withRouter 路由属性配置_DOM曼珠沙华的博客-CSDN博客
9.React中的state和props有什么区别
props 是组件对外的接口，state 是组件对内的接口。 组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的 props 属性进行传递，因此 props 是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口 state。根据对外接口 props 和对内接口 state，组件计算出对应界面的UI。
10.React 中 keys 的作用是什么？
涉及到diff算法
key的取值可以分为三种，不定值、索引值、确定且唯一值
- 在使用key时，要保证key的唯一和确定性，如果key的值为math.random()，可能造成组件重新构建，使之前对元素的操作失效
- 在渲染页面时，尽量不要操作真实的dom，使用state来更新页面
11.React17 中对 Ref 的正确使用方式有哪些？
12.在 React 中如何处理事件
13.在构造函数调用 super 并将 props 作为参数传入的作用是啥？（没理解）
(在构造函数中)调用 super(props) 的目的是什么_构造方法为什么要调用一下super_祥哥的说的博客-CSDN博客
【React 进阶】props 和 state 的区别详解_props和state的区别_八了个戒的博客-CSDN博客
14.什么是受控组件
15.使用 React Hooks 好处是啥
在React中函数组件是没有React state 、生命周期这些功能的。在React16.8之前的模式是 class 组件(提供状态) + 函数组件(展示内容) ；React16.8之后，React提供了Hooks钩子函数，它使函数组件提供了状态、生命周期等原本 在Class 组件中才提供的功能。
Hooks带来的好处：
- 函数本身比较简单，提供了Hooks的函数组件可以更好的胜任根据状态来渲染UI这件事
- hooks让函数组件内部有了维护状态的能力
- hooks带来了组件的逻辑复用能力
具体也可以查看这篇内容 React Hooks的定义及使用
16.合成事件
17.函数组件和类组件怎么选择？
看API的使用
18. 什么是 React Fiber?
【react】什么是fiber？fiber解决了什么问题？从源码角度深入了解fiber运行机制与diff执行_react fiber_行星飞行的博客-CSDN博客我在[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?一文中，介绍了虚拟的概念，以及中虚拟的使用场景。那么按照之前的约定，本文来聊聊中另一个非常重要的概念，也就是。那么通过阅读本文，你将了解到如下几个知识点：同样，若文中涉及到的源码部分，我依然会使用的版本，保证文章的结论不会过于老旧；其次，的概念理解起来其实比较枯燥，但我会尽量描述的通俗易懂一点，那么本文开始。我们学习任何东西，一定会经历两个阶段，一是这个东西是什么？二是这个东西有什么用（解https://blog.csdn.net/echolunzi/article/details/125586636React的新引擎—React Fiber是什么？ - 掘金当浏览器的主线程长时间忙于运行一些事情时，关键任务的执行可以能被推迟。 为了展示这个问题，我做了一个demo，为了使星球一直转动，主线程需要每16ms被调用一次，因为animation是跑在主线程上的。如果主线程被其他事情占用，假如占用了200ms，你会发现animation会…
https://juejin.cn/post/6844903700717109261
19. Hooks会取代 render props 和高阶组件吗？
包子铺这是河狸兽的包子铺https://wangxinyang.xyz/article/60ec6184e8477312e204a364
20. 如何避免组件的重新渲染？
React 组件重渲染可能会导致应用性能下降，以下是一些避免重渲染的方法和实战经验：
1、使用 shouldComponentUpdate 或 PureComponent
在 shouldComponentUpdate 或 PureComponent 中进行 props 和 state 的浅比较，如果没有变化，则返回 false，防止不必要的重渲染。
2、使用 React.memo
对于函数组件，可以使用 React.memo 高阶组件对组件的 props 进行浅比较，如果没有变化，则返回缓存的组件。
const MyComponent = React.memo((props) => {
// ...
});3、使用 useMemo 和 useCallback
对于需要传递给子组件的 props，可以使用 useMemo 缓存计算结果，避免在每次渲染时重新计算。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);对于需要传递给子组件的回调函数，可以使用 useCallback 缓存函数实例，避免在每次渲染时重新创建函数实例。
const handleClick = useCallback(() => {
// ...
}, [a, b]);4、避免更新整个 state
在使用 setState 更新 state 时，确保只更新必要的部分，而不是整个 state 对象。例如，如果只需要更新 state 中的一个属性，可以使用对象的展开语法：
this.setState({ count: this.state.count + 1 });5、避免在 render 方法中创建新的对象或数组
在 render 方法中创建新的对象或数组会导致组件重渲染，可以将它们提取到组件外部的变量中。
const options = [{ value: 'foo', label: 'Foo' }, { value: 'bar', label: 'Bar' }];
function MyComponent() {
return <Select optinotallow={options} />;
}6、避免在 render 方法中执行耗时的操作
在 render 方法中执行耗时的操作会导致组件重渲染，可以将它们提前到组件的生命周期方法中执行。
class MyComponent extends React.Component {
componentDidMount() {
// 执行耗时操作
}
render() {
// ...
}
}以上是一些避免 React 组件重渲染的方法和实战经验，可以根据具体情况选择合适的方法来优化应用性能。
21. 什么是纯函数？
22. 当调用setState时，React render 是如何工作的？
23. react生命周期函数
24. react性能优化是哪个周期函数？
react性能优化的周期函数是什么 - web开发 - 亿速云这篇文章主要讲解了“react性能优化的周期函数是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react...
shouldComponentUpdate() 方法格式如下：
shouldComponentUpdate(nextProps, nextState)shouldComponentUpdate() 方法会返回一个布尔值，指定 React 是否应该继续渲染，默认值是 true， 即 state 每次发生变化组件都会重新渲染。
shouldComponentUpdate() 的返回值用于判断 React 组件的输出是否受当前 state 或 props 更改的影响，当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
25. diff算法?
26. react性能优化方案
https://www.infoq.cn/article/KVE8xtRs-uPphptq5LUz27. 简述flux 思想（这里需对比 flux redux mobx pinia vuex 待补）
Flux 的最大特点，就是数据的"单向流动"。
用户访问 View
View 发出用户的 Action
Dispatcher 收到 Action，要求 Store 进行相应的更新
Store 更新后，发出一个"change"事件
View 收到"change"事件后，更新页面
28. 你了解React吗？
React用于构建 Web 和原生交互界面的库
https://react.docschina.org/
29. React解决了什么问题？
React可以解决前端开发中的哪些痛点_react解决什么问题_千锋IT教育的博客-CSDN博客3.Fiber算法, React16提出了Fiber架构，其能够将任务分片，划分优先级，同时能够实现类似于操作系统中对线程的抢占式调度，非常强大, 对于因为JavaScript的单线程特性，单个同步任务耗时太长，出现卡顿的问题就可以得到解决, 这进一步弥补了React在组件更新机制方面的缺陷.5.结合shouldComponentUpdate等方法, 可以避免不必要的组件更新, 实现更少的cpu消耗, 程序员可以从代码的角度介入到组件更新效率的控制过程中。DOM元素，再设置属性)像React框架, 它在。https://blog.csdn.net/longz_org_cn/article/details/128900036react 最新版本解决了什么问题 加了哪些东西 - 知乎React161）React 16.x的三大新特性 Time Slicing, Suspense，hooks Time Slicing（解决CPU速度问题）使得在执行任务的期间可以随时暂停，跑去干别的事情，这个特性使得react能在性能极其差的机器跑时，仍然保持有…
https://zhuanlan.zhihu.com/p/506375050
30. React 的工作原理？
fiber vdom diff
31. 应该在 React 组件的何处发起 Ajax 请求？
componentDidMount
useEffect
32. 为什么建议传递给 setState 的参数是一个 callback 而不是一个对象？
React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。
因为this.props和this.state 可能是异步更新的，你不能依赖他们的值计算下一个state(状态)。以下面的代码为例:
this.setState({
counter: this.state.counter + this.props.increment,
});
我们并不能通过上述代码得到想要的值，为了弥补这个问题，使用另一种 setState() 的形式，接受一个函数。这个函数将接收前一个状态作为第一个参数，应用更新时的 props 作为第二个参数，代码如下：
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
4637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
