没有合适的资源?快使用搜索试试~ 我知道了~
React 作为前端使用最多的框架,必然是面试的重点。我们接下来主要从 React 的使用方式、源码层面和周边生态(如 redux, react-router 等)等几个方便来进行总结。 1. 使用方式上 这里主要考察的是,在开发使用过程中,对 React 框架的了解,如 hook 的不同调用方式得到的结果、函数组件中的 useState 和类组件的 state 的区别等等。 源码层面上 这部分考察的就更有深度一些了,多多少少得了解一些源码,才能明白其中的缘由,比如 React 的 diff 对比,循环中 key 的作用等。 周边生态 这部分主要考察 React 周边生态配套的了解,如状态管理库 redux、mobx,路由组件 react-router-dom 等。 react-router 和 react-router-dom 的有什么区别? 还有源码层面上的交流
资源推荐
资源详情
资源评论
React 作为前端使用最多的框架,必然是面试的重点。我们接下来主要从 React
的使用方式、源码层面和周边生态(如 redux, react-router 等)等几个方便来
进行总结。
1. 使用方式上
这里主要考察的是,在开发使用过程中,对 React 框架的了解,如 hook 的不
同调用方式得到的结果、函数组件中的 useState 和类组件的 state 的区别等等。
props 的变动,是否会引起 state hook 中数据的变动?
React 组件的 props 变动,会让组件重新执行,但并不会引起 state 的值的变
动。state 值的变动,只能由 setState() 来触发。因此若想在 props 变动时,
重置 state 的数据,需要监听 props 的变动,如:
const App = props => {
const [count, setCount] = useState(0);
//
监听
props
的变化,重置
count
的值
useEffect(() => {
setCount(0);
}, [props]);
return <div onClick={() => setCount(count + 1)}>{count}</div>;
};
React18 有哪些新变化?
React 的更新都是渐进式的更新,在 React18 中启用的新特性,其实在 v17 中
(甚至更早)就埋下了。
1.
并发渲染机制:根据用户的设备性能和网速对渲染过程进行适当的调整,
保证 React 应用在长时间的渲染过程中依旧保持可交互性,避免页面出
现卡顿或无响应的情况,从而提升用户体验。
2.
3.
新的创建方式:现在是要先通过 createRoot()创建一个 root 节点,然
后该 root 节点来调用 render()方法;
4.
5.
自动批处理优化:批处理: React 将多个状态更新分组到一个重新渲染
中以获得更好的性能。(将多次 setstate 事件合并);在 v18 之前只在
事件处理函数中实现了批处理,在 v18 中所有更新都将自动批处理,包
括 promise 链、setTimeout 等异步代码以及原生事件处理函数;
6.
7.
startTransition:主动降低优先级。比如「搜索引擎的关键词联想」,用
户在输入框中的输入希望是实时的,而联想词汇可以稍稍延迟一会儿。我
们可以用 startTransition 来降低联想词汇更新的优先级;
8.
9.
useId:主要用于 SSR 服务端渲染的场景,方便在服务端渲染和客户端渲
染时,产生唯一的 id;
10.
并发模式是如何执行的?
React 中的并发,并不是指同一时刻同时在做多件事情。因为 js 本身就是单线
程的(同一时间只能执行一件事情),而且还要跟 UI 渲染竞争主线程。若一个
很耗时的任务占据了线程,那么后续的执行内容都会被阻塞。为了避免这种情况,
React 就利用 fiber 结构和时间切片的机制,将一个大任务分解成多个小任务,
然后按照任务的优先级和线程的占用情况,对任务进行调度。
�
对于每个更新,为其分配一个优先级 lane,用于区分其紧急程度。
�
�
通过 Fiber 结构将不紧急的更新拆分成多段更新,并通过宏任务的方式
将其合理分配到浏览器的帧当中。这样就能使得紧急任务能够插入进来。
�
�
高优先级的更新会打断低优先级的更新,等高优先级更新完成后,再开始
低优先级更新。
�
什么是受控组件和非受控组件?
我们稍微了解下什么是受控组件和非受控组件:
�
受控组件:只能通过 React 修改数据或状态的组件,就是受控组件;
�
�
非受控组件:与受控组件相反,如 input, textarea, select, checkbox 等组
件,本身控件自己就能控制数据和状态的变更,而且 React 是不知道这
些变更的;
�
那么如何将非受控组件改为受控组件呢?那就是把上面的这些纯 html 组件数据
或状态的变更,交给 React 来操作:
const App = () => {
const [value, setValue] = useState('');
const [checked, setChecked] = useState(false);
return (
<>
<input value={value} onInput={event => setValue(event.target.value)}
/>
<input type="checkbox" checked={checked} onChange={event =>
setChecked(event.target.checked)} />
</>
);
};
上面代码中,输入框和 checkbox 的变化,均是经过了 React 来操作的,在数
据变更时,React 是能够知道的。
高阶组件(HOC)?
高阶组件?
高阶组件通过包裹(wrapped)被传入的 React 组件,经过一系列处理,最终
返回一个相对增强(enhanced)的 React 组件,供其他组件调用。
作用:
1.
复用逻辑:高阶组件更像是一个加工 react 组件的工厂,批量对原有组
件进行加工,包装处理。我们可以根据业务需求定制化专属的 HOC,这样
可以解决复用逻辑。
剩余24页未读,继续阅读
资源评论
前网易架构师-高司机
- 粉丝: 8102
- 资源: 202
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功