百度前端高频react面试题总结

可以使用TypeScript写React应用吗？怎么操作？

（1）如果还未创建 Create React App 项目

• 直接创建一个具有 typescript 的 Create React App 项目：

 npx create-react-app demo --typescript

（2）如果已经创建了 Create React App 项目，需要将 typescript 引入到已有项目中

• 通过命令将 typescript 引入项目：

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

• 将项目中任何 后缀名为 ‘.js’ 的 JavaScript 文件重命名为 TypeScript 文件即后缀名为 ‘.tsx’（例如 src/index.js 重命名为 src/index.tsx ）

pureComponent和FunctionComponent区别

PureComponent和Component完全相同，但是在shouldComponentUpdate实现中，PureComponent使用了props和state的浅比较。主要作用是用来提高某些特定场景的性能

什么是 React Fiber?

Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。
React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。

React 父组件如何调用子组件中的方法？

1. 如果是在方法组件中调用子组件（>= react@16.8），可以使用 useRef 和 useImperativeHandle:

const {
    forwardRef, useRef, useImperativeHandle } = React;

const Child = forwardRef((props, ref) => {
   
  useImperativeHandle(ref, () => ({
   
    getAlert() {
   
      alert("getAlert from Child");
    }
  }));
  return <h1>Hi</h1>;
});

const Parent = () => {
   
  const childRef = useRef();
  return (
    <div>
      <Child ref={
   childRef} />
      <button onClick={
   () => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

2. 如果是在类组件中调用子组件（>= react@16.4），可以使用 createRef:

const {
    Component } = React;

class Parent extends Component {
   
  constructor(props