2023版最新最全React面试题

本文介绍: 受控组件：只能通过 Reac t 修改数据或状态的组件，就是受控组件；非受控组件：与受控组件相反，如 input, text area, select, c hec k box 等组件，本身控件自己就能控制数据和状态的变更，而且 Reac t 是不知道这些变更的；那么如何将非受控组件改为受控组件呢？return (上面代码中，输入框和 c hec k box 的变化，均是经过了 React 来操作的，在数据变更时，React 是能够知道的。

React 作为前端使用最多的框架，必然是面试的重点。我们接下来主要从 Rea ct 的使用方式、源码层面和周边生态（如 redux, react–router 等）等几个方便来进行总结。

这里主要考察的是，在开发使用过程中，对 React 框架的了解，如 hook 的不同调用方式得到的结果、函数组件中的 useState 和类组件的 state 的区别等等。

React 组件的 prop s 变动，会让组件重新执行，但并不会引起 state 的值的变动。state 值的变动，只能由 setState() 来触发。因此若想在 props 变动时，重置 state 的数据，需要监听 pro ps 的变动，如：

const App = props =&gt; {
  const [count, setCount] = useState(0);

  // 监听 props 的变化，重置 count 的值
  useEffect(() =&gt; {
    setCount(0);
  }, [props]);

  return <div onClick={() =&gt; setCount(count + 1)}&gt;{count}</div>;
};

React 的更新都是渐进式的更新，在 React18 中启用的新特性，其实在 v17 中（甚至更早）就埋下了。

React 中的并发，并不是指同一时刻同时在做多件事情。因为 js 本身就是单线程的（同一时间只能执行一件事情），而且还要跟 UI 渲染竞争主线程。若一个很耗时的任务占据了线程，那么后续的执行内容都会被阻塞。为了避免这种情况，React 就利用 fiber 结构和时间切片的机制，将一个大任务分解成多个小任务，然后按照任务的优先级和线程的占用情况，对任务进行调度。

我们稍微了解下什么是受控组件和非受控组件：

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)} />
    </>
  );
};

const App = () => {
  const [count, setCount] = useState(0);

  const handleParamClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  const handleCbClick = () => {
    setCount(count => count + 1);
    setCount(count => count + 1);
    setCount(count => count + 1);
  };
};

上面的两种传入方式，最后得到的 count 结果是不一样的。为什么呢？因为在以数据的格式传参时，这 3 个使用的是同一个 count 变量，数值是一样的。相当于setCount(0 + 1)，调用了 3 次；但以回调函数的传参方式，React 则一般地会直接该回调函数，然后得到最新结果并存储到 React 内部，下次使用时就是最新的了。注意：这个最新值是保存在 React 内部的，外部的 count 并不会马上更新，只有在下次渲染后才会更新。

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
    }, 500);
    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count => count + 1);
    }, 500);
    return () => clearInterval(timer);
  }, []);
};

import React, { lazy, Suspense } from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

属性fallback表示在加载组件前，渲染的内容。

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <div className="App">{count}</div>;
};

const App = () => {
  const [count, setCount] = useState(0);

  // 监听 count 的变化，不过这里将定时器改成了 setTimeout
  // 即使不修改，setInterval()的timer也会在每次渲染时被清除掉，
  // 然后重新启动一个新的定时器
  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, [count]);

  // 以回调的方式
  // 回调的方式，会计算回调的结果，然后作为下次更新的初始值
  // 详情可见： https://www.xiabingbao.com/post/react/react-usestate-rn5bc0.html#5.+updateReducer
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <div className="App">{count}</div>;
};

// https://overreacted.io/zh-hans/making-setinterval-declarative-with-react-hooks/
const useInterval = (callback: () => void, delay: number | null): void => {
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
};

// 运行第一个 effect

// 产生更新时
// 清除上一个 effect
// 运行下一个 effect

// 产生更新时
// 清除上一个 effect
// 运行下一个 effect

// 组件卸载时
// 清除最后一个 effect

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

react 受控组件

1. 使用方式上

prop s 的变动，是否会引起 state hook 中数据的变动？

React18 有哪些新变化？

并发 模式是如何执行的？

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

高阶组件（HOC）？

高阶组件？

React 中为什么要使用 Hook？

useCallb ack 和 useMemo 的使用场景

useState 的传参方式，有什么区别？

为什么在本地 开发时，组件会渲染两次？

如何 实现组件的懒加载

如何 实现一个定时器的 hook

useEffect()的清除机制是什么？在什么时候执行？

2. 源码层面上

虚拟 dom 有什么优点？真实 dom 和虚拟 dom，谁快？

什么是合成事件，与原生 事件有什么区别？

key 的作用是什么？

多次执行 useState()，会触发多次更新吗？

useState()的 state 是否可以直接修改？是否可以引起组件渲染？

React 的 diff 过程

基于 React 框架的特点，可以有哪些优化措施？

React.Children.map 和 js 的 map 有什么区别？

3. 周边生态

react-router 和 react-router-dom 的有什么区别？

Redux 遵循的三个原则是什么？

你对“单一事实来源”有什么理解？

Redux 有哪些优点？

4. 总结

发表回复取消回复