React基础面试题（一）

Vue 和 React 的区别

相同点

1. 引入了虚拟 DOM 的概念，通过数据驱动视图更新
2. 组件化的编程思想
3. 都有相应的路由库和状态管理库

不同点

1. Vue 是 reactivity，当数据变更时，视图会自动更新，而 React 需要通过 setState 来驱动视图更新
2. Vue 内置了丰富的指令供用户使用，React 则无类似的指令
3. Vue 使用类似 HTML 的写法来编写，React 使用 JSX 语法

React16 新生命周期，有什么变化？

React16 后新增了两个生命周期，getDerivedStateFromProps 和 getSnapshotBeforeUpdate，准备移除 componentWillReceiveProps，componentWillUpdate 和 componentWillMount 这三个生命周期

那么新的生命周期在什么时候会被调用呢？

getDerivedStateFromProps()

函数签名如下

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps() 是一个静态方法，这个生命周期会在每次挂载或者重新渲染的时候调用，参数是最新的 props 和 当前的 state，如果返回 null 则代表不需要重新渲染，返回新的状态则会重新渲染

class Child extends React.Component {
  constructor() {
    this.state = {
      name: "1024nav",
    };
  }

  static getDerivedStateFromProps(props, state) {
    if (props.name !== state.name) {
      return {
        name: "1024",
      };
    }
    return null;
  }

  render() {
    <div>{name}</div>;
  }
}

getSnapshotBeforeUpdate()

函数签名如下

getSnapshotBeforeUpdate(prevProps, prevState) {}

getSnapshotBeforeUpdate() 在渲染 DOM 之前调用，返回值会传递给 componentDidUpdate() 的第三个参数，通常与 componentDidUpdate() 配合使用，例如

class Child extends React.Component {
  constructor() {
    this.state = {
      name: "1024nav",
    };
  }

  getSnapshotBeforeUpdate() {
    return { name: "hello 1024nav" };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot); // { name: 'hello 1024nav' }
  }

  render() {
    <div>{name}</div>;
  }
}

展示组件和容器组件有何不同

• 展示组件只是纯展示，数据来源于 props ，不声明自身的状态
• 容器组件拥有自身状态，并有修改自身状态的操作，然后把状态传递给展示组件来展示

refs 的作用是什么？

refs 提供一个安全访问 dom 元素或者 react 组件实例的一种方式

refs 使用的场景

• 操作 input 标签控制聚焦，操作 video 标签控制播放等

• 访问组件实例，可以调用组件的方法（通常不建议使用，例如不直接调用 Modal 的 close() 方法，直接通过 visible 属性来控制）

如何使用 refs

1. 在 class 组件用 React.createRef() 来声明，例如

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

2. 在函数组件使用 React.forwardRef() 来暴露函数组件的 DOM 元素

const Input = forwardRef((props, ref) => {
  return (
    <input {...props} ref={ref}>
  )
})

class MyComponent extends React.Component {

  constructor() {
    this.ref = React.createRef(null);
  }

  clickHandle = () => {
    // 操作Input组件聚焦
    this.ref.current.focus();
  }

  render() {
    return (
      <div>
        <button onClick={this.clickHandle}>
          点击
        </button>
        <Input ref={this.ref}>
      </div>
    )
  }
}

什么是高阶组件（HOC)

高阶组件是一个普通函数，通过传入一个组件，新增一些组件逻辑，返回一个新的组件，主要用来增强组件的功能。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

react 插槽

react Portals 可以将组件渲染到指定任意 HTML 元素节点上，依旧保持着状态传递和事件处理功能，函数签名如下

ReactDOM.createPortal(child, container);

第一个参数可以是 React 元素，字符串，数字，第二个参数是一个真实的 DOM 元素