reactor面试题宝典下载

React 作为前端使用最多的框架，必然是面试的重点。我们接下来主要从 React 的使用方式、源码层面和周边生态（如 redux, react-router 等）等几个方便来进行总结。 1. 使用方式上 这里主要考察的是，在开发使用过程中，对 React 框架的了解，如 hook 的不同调用方式得到的结果、函数组件中的 useState 和类组件的 state 的区别等等。 源码层面上 这部分考察的就更有深度一些了，多多少少得了解一些源码，才能明白其中的缘由，比如 React 的 diff 对比，循环中 key 的作用等。 周边生态 这部分主要考察 React 周边生态配套的了解，如状态管理库 redux、mobx，路由组件 react-router-dom 等。 react-router 和 react-router-dom 的有什么区别？ 还有源码层面上的交流 ### Reactor面试题宝典知识点总结 #### 一、React框架使用方式 1. **Hook的不同调用方式**： - `useState` 和 `useEffect` 等 Hook 在函数组件中的使用非常重要。例如，`useState` 可以用来管理组件内的状态，而 `useEffect` 则可以用来处理副作用，比如数据获取、订阅或手动触发某些操作。 - 不同的调用方式会产生不同的结果，例如在 `useEffect` 中依赖数组的不同设置会影响副作用函数的执行时机。 - **示例**：当 `useEffect` 的依赖数组为空时，该副作用仅在组件挂载时运行一次，并在卸载时运行清除函数；而当依赖数组包含变量时，则会在这些变量变化时重新执行副作用函数。 2. **函数组件与类组件的对比**： - 函数组件中的 `useState` 与类组件中的 `this.state` 的主要区别在于管理状态的方式不同。 - 类组件通过 `this.setState` 来改变状态，而函数组件则使用 `useState` 的返回值（当前状态和更新状态的函数）来实现状态管理。 - **示例**：在函数组件中使用 `useState` 来初始化状态并更新状态： ```jsx function Example() { const [count, setCount] = React.useState(0); function handleClick() { setCount(count + 1); } return ( <div> Count: {count} <button onClick={handleClick}>Increase</button> </div> ); } ``` 3. **Props 和 State 的关系**： - Props 的变动不会直接导致 State 的改变，而是可能会触发组件的重新渲染。 - 如果需要在 Props 变动时重置 State，可以通过 `useEffect` 监听 Props 的变化并在适当的时候更新 State。 - **示例**：监听 `props` 的变化并重置 State： ```jsx const App = props => { const [count, setCount] = React.useState(0); React.useEffect(() => { setCount(0); }, [props]); return <div onClick={() => setCount(count + 1)}>{count}</div>; }; ``` #### 二、React源码层面理解 1. **Diff算法**： - React 的核心之一是它的虚拟 DOM 与 Diff 算法，这使得它能够在实际更新 DOM 之前计算出最小的变更集合。 - **关键概念**：Reconciliation（调和）、Fiber 结构、Concurrent Mode（并发模式）等。 - React 使用 Fiber 结构来实现高效的渲染和更新过程。 2. **Key的作用**： - 在列表渲染中，为每个子元素提供唯一的 `key` 是非常重要的，这有助于提高列表的渲染效率。 - 当列表项发生变化时，React 会基于 `key` 的唯一性来识别列表项，从而决定哪些项需要更新、添加或删除。 - **示例**：在列表中使用 `key`： ```jsx function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li> ); return <ul>{listItems}</ul>; } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); ``` #### 三、React周边生态 1. **Redux vs MobX**： - Redux 是一种用于管理应用状态的库，它提供了 Store、Reducer 和 Action 的模式。 - MobX 则是一种更简单的状态管理解决方案，强调“状态可观察”和“反应式”编程。 - **比较**：Redux 更适合复杂的应用状态管理，而 MobX 更适用于简单的状态管理和快速开发。 2. **React Router vs React Router DOM**： - `React Router` 是一个通用的路由库，适用于服务器端渲染和原生应用程序。 - `React Router DOM` 是针对 Web 应用程序的版本，提供了针对浏览器环境的特定功能。 - **差异**：主要在于它们提供的 API 略有不同，但基本原理和用法相似。 #### 四、React18的新特性 1. **并发渲染机制**： - React18 引入了并发渲染模式，允许 React 在用户交互过程中进行渲染，从而改善用户体验。 - 这种机制通过将任务划分为更小的片段，并根据任务的优先级和浏览器空闲时间来调度这些片段来实现。 2. **新的创建方式**： - 在 React18 中，创建根节点的过程发生了变化，需要先通过 `createRoot()` 创建一个根节点，然后再调用 `render()` 方法。 3. **自动批处理优化**： - React18 改进了批处理机制，现在所有的状态更新都会被自动批处理，即使是在 Promise 链、`setTimeout` 等异步代码中也是如此。 4. **startTransition**： - `startTransition` 允许开发者主动降低某些状态更新的优先级，这对于某些不需要立即更新的操作来说非常有用。 5. **useId**： - `useId` 是 React18 引入的一个新 Hook，主要用于 SSR 场景下生成唯一的 ID。 6. **并发模式执行细节**： - 并发模式并不是真正意义上的并行执行，而是通过时间切片技术来实现更高效的渲染。 - React 使用 Fiber 结构和时间切片机制来将大任务分解成多个小任务，并根据优先级进行调度。 - 高优先级的更新可以打断低优先级的更新。 #### 五、受控组件与非受控组件 1. **受控组件**： - 受控组件是指那些其值由 React 控制的表单元素。 - 这意味着组件的状态（如文本框的值）是由 React 状态管理的。 2. **非受控组件**： - 非受控组件则是指那些其值不由 React 控制的表单元素。 - 这些组件通常使用默认的 HTML 行为来管理自己的状态。 3. **转换方法**： - 可以通过将非受控组件的值与 React 状态关联起来，将非受控组件转换为受控组件。 - **示例**：将输入框转换为受控组件： ```jsx function ControlledForm() { const [value, setValue] = React.useState(''); function handleChange(event) { setValue(event.target.value); } return ( <input value={value} onChange={handleChange} /> ); } ``` 通过上述总结，可以看出 React 的使用方式、源码层面的理解以及周边生态的掌握对于深入理解和高效使用 React 至关重要。无论是从基础的 Hook 使用方式，还是深入源码层面理解 Diff 算法和并发模式，再到对周边生态如 Redux 和 React Router 的了解，这些知识点都是面试中不可或缺的内容。