React面试题

## 面试

* 怎么解决 css 命名冲突

    1. css-module

    2. css in js

    3. react-css-modules / styleName(我们用的)

* 怎么让一个元素 上下左右居中 (3种)

    1.

      display: flex; // 设置 flex 必须要设置父元素

      justify-content: center; // x 轴居中

      align-items: center; // y 轴居中

* 错误边界

class ErrorBoundary extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      errorInfo: null

    };

  }

  

  static getDerivedStateFromError (error) {

    console.log(error, 'error2222222');

    // 更新 state 使下一次渲染可以显示降级 UI

    return { errorInfo: true }

  }



  // 报错

  componentDidCatch(error, errorInfo) {

    // 请求后台接口 把错误上报

    console.log(errorInfo, 'errorInfo');

    console.log(error, 'error');

  }

  

  render() {

    if (this.state.errorInfo) {

      return (

        <div>

          错误替代展示

        </div>

      );

    }



    return this.props.children;

  }  

}

* useEffect 可以模拟哪些生命周期

    1. componentDidMount // 加载完成的

    2. componentDidUpdate // 更新阶段

    3. componentWillUnmount // 卸载阶段

* useRef 和  createRef 区别

     useRef 只执行一次，有初始值，可以用于保存上一次的值

     createRef 每次组件渲染都会执行，没有初始值

* setInterval, setTimeout 特性

  const [time, setTime] = useState(3)

  useEffect(() => {

    // setInterval, setTimeout 会形成闭包，会保存 time 的复制值，该值与外面的 time

    // 不是同一个值

    setInterval(() => {

      setTime(time - 1)

      // 始终输出 3

      console.log(time, 'xxx');

    }, 1000)

  }, [])