前端常见react面试题合集

最新推荐文章于 2024-10-02 09:10:17 发布

夏天的味道123

最新推荐文章于 2024-10-02 09:10:17 发布

阅读量1.4k

点赞数 1

文章标签：前端框架 reactjs

本文链接：https://blog.csdn.net/grooyo/article/details/129546388

版权

本文详细探讨了React中的高阶组件、Render props和Hooks的区别以及它们的迭代原因，强调了Hooks在解决代码复用和避免prop覆盖、嵌套问题上的优势。此外，文章还涵盖了组件通信的各种方式，包括props、回调、Context、发布订阅和全局状态管理工具。React优化方面提到了shouldComponentUpdate、PureComponent和setState等策略，以及虚拟DOM的优势。对于React Hooks的使用注意事项，文中提醒了避免在循环或条件语句中调用Hook以及善用useCallback。最后，文章阐述了React Router的配置方法，以及React组件开发中的作用域问题和Redux请求中间件处理并发的方法。

摘要由CSDN通过智能技术生成

React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代

这三者是目前react解决代码复用的主要方式：

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。
render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术，更具体的说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。
通常，render props 和高阶组件只渲染一个子节点。让 Hook 来服务这个使用场景更加简单。这两种模式仍有用武之地，（例如，一个虚拟滚动条组件或许会有一个 renderltem 属性，或是一个可见的容器组件或许会有它自己的 DOM 结构）。但在大部分场景下，Hook 足够了，并且能够帮助减少嵌套。

（1）HOC 官方解释∶

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

简言之，HOC是一种组件的设计模式，HOC接受一个组件和额外的参数（如果需要），返回一个新的组件。HOC 是纯函数，没有副作用。

// hoc的定义
function withSubscription(WrappedComponent, selectData) {
   
  return class extends React.Component {
   
    constructor(props) {
   
      super(props);
      this.state = {
   
        data: selectData(DataSource, props)
      };
    }
    // 一些通用的逻辑处理
    render() {
   
      // ... 并使用新数据渲染被包装的组件!
      return <WrappedComponent data={
   this.state.data} {
   ...this.props} />;
    }
  };

// 使用
const BlogPostWithSubscription = withSubscription(BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id));

HOC的优缺点∶

优点∶ 逻辑服用、不影响被包裹组件的内部逻辑。
缺点∶ hoc传递给被包裹组件的props容易和被包裹后的组件重名，进而被覆盖

（2）Render props 官方解释∶

"render prop"是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术

具有render prop 的组件接受一个返回React元素的函数，将render的渲染逻辑注入到组件内部。在这里，"render"的命名可以是任何其他有效的标识符。

// DataProvider组件内部的渲染逻辑如下
class DataProvider extends React.Components {
   
     state = {
   
    name: 'Tom'
  }

    render() {
   
    return (
        <div>
          <p>共享数据组件自己内部的渲染逻辑</p>
          {
    this.props.render(this.state) }      </div>
    );
  }
}

// 调用方式
<DataProvider render={
   data => (
  <h1>Hello {
   data.name}</h1>
)}/>

由此可以看到，render props的优缺点也很明显∶

优点：数据共享、代码复用，将组件内的state作为props传递给调用者，将渲染逻辑交给调用者。
缺点：无法在 return 语句外访问数据、嵌套写法不够优雅

（3）Hooks 官方解释∶

Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。通过自定义hook，可以复用代码逻辑。

// 自定义一个获取订阅数据的hook
function useSubscription() {
   
  const data = DataSource.getComments();
  return [data];
}
// 
function CommentList(props) {
   
  const {
   data} = props;
  const [subData] = useSubscription();
    ...
}
// 使用
<CommentList data='hello' />

以上可以看出，hook解决了hoc的prop覆盖的问题，同时使用的方式解决了render props的嵌套地狱的问题。hook的优点如下∶

使用直观；
解决hoc的prop 重名问题；
解决render props 因共享数据而出现嵌套地狱的问题；
能在return之外使用数据的问题。

需要注意的是：hook只能在组件顶层使用，不可在分支语句中使用。、

组件通信的方式有哪些

⽗组件向⼦组件通讯: ⽗组件可以向⼦组件通过传 props 的⽅式，向⼦组件进⾏通讯
⼦组件向⽗组件通讯: props+回调的⽅式，⽗组件向⼦组件传递props进⾏通讯，此props为作⽤域为⽗组件⾃身的函数，⼦组件调⽤该函数，将⼦组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中
兄弟组件通信: 找到这两个兄弟节点共同的⽗节点,结合上⾯两种⽅式由⽗节点转发信息进⾏通信
跨层级通信: Context 设计⽬的是为了共享那些对于⼀个组件树⽽⾔是“全局”的数据，例如当前认证的⽤户、主题或⾸选语⾔，对于跨越多层的全局数据通过 Context 通信再适合不过
发布订阅模式: 发布者发布事件，订阅者监听事件并做出反应,我们可以通过引⼊event模块进⾏通信
全局状态管理⼯具: 借助Redux或者Mobx等全局状态管理⼯具进⾏通信,这种⼯具会维护⼀个全局状态中⼼Store,并根据不同的事件产⽣新的状态

react 的优化

shouldcomponentUpdate pureCompoment setState

CPU的瓶颈（当有大量渲染任务的时候，js线程和渲染线程互斥）
IO的瓶颈就是网络（如何在网络延迟客观存在的情况下，减少用户对网络延迟的感知）（Code Splitting • Data Fetching）比如react.lazy（组件懒加载） suspense(分包在网络上，用的时候在获取)
Virtual DOM 快么（Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。）

展示组件(Presentational component)和容器组件(Container component)之间有何不同?

useEffect 与 useLayoutEffect 的区别

（1）共同点

运用效果： useEffect 与 useLayoutEffect 两者都是用于处理副作用，这些副作用包括改变 DOM、设置订阅、操作定时器等。在函数组件内部操作副作用是不被允许的，所以需要使用这两个函数去处理。
使用方式： useEffect 与 useLayoutEffect 两者底层的函数签名是完全一致的，都是调用的 mountEffectImpl方法，在使用上也没什么差异，基本可以直接替换。

（2）不同点

使用场景： useEffect 在 React 的渲染过程中是被异步调用的，用于绝大多数场景；而 useLayoutEffect 会在所有的 DOM 变更之后同步调用，主要用于处理 DOM 操作、调整样式、避免页面闪烁等问题。也正因为是同步处理，所以需要避免在 useLayoutEffect 做计算量较大的耗时任务从而造成阻塞。
使用效果： useEffect是按照顺序执行代码的，改变屏幕像素之后执行（先渲染，后改变DOM），当改变屏幕内容时可能会产生闪烁；useLayoutEffect是改变屏幕像素之前就执行了（会推迟页面显示的事件，先改变DOM后渲染），不会产生闪烁。useLayoutEffect总是比useEffect先执行。

在未来的趋势上，两个 API 是会长期共存的，暂时没有删减合并的计划，需要开发者根据场景去自行选择。React 团队的建议非常实用，如果实在分不清，先用 useEffect，一般问题不大；如果页面有异常，再直接替换为 useLayoutEffect 即可。

什么是受控组件和非受控组件

受状态控制的组件，必须要有onChange方法，否则不能使用受控组件可以赋予默认值（官方推荐使用受控组件）实现双向数据绑定

class Input extends Component{
   
    constructor(){
   
        super();
        this.state = {
   val:'100'}
    }
    handleChange = (e) =>{
    //e是事件源
        let val = e.target.value;
        this.setState({
   val});
    };
    render(){
   
        return (<div>
            <input type="text" value={
   this.state.val} onChange={
   this.handleChange}/>