关于react.js:5-分钟搞懂面试官必问-React-题

说说对 React Hooks 的了解？解决了什么问题？
一、是什么
Hook 是 React 16.8 的新增个性。它能够让你在不编写 class 的状况下应用 state 以及其余的 React 个性

至于为什么引入 hook，官网给出的动机是解决长时间应用和保护 react 过程中常遇到的问题，例如：

难以重用和共享组件中的与状态相干的逻辑
逻辑简单的组件难以开发与保护，当咱们的组件须要解决多个互不相干的 local state 时，每个生命周期函数中可能会蕴含着各种互不相干的逻辑在外面
类组件中的 this 减少学习老本，类组件在基于现有工具的优化上存在些许问题
因为业务变动，函数组件不得不改为类组件等等
在以前，函数组件也被称为无状态的组件，只负责渲染的一些工作

因而，当初的函数组件也能够是有状态的组件，外部也能够保护本身的状态以及做一些逻辑方面的解决

二、有哪些
下面讲到，Hooks 让咱们的函数组件领有了类组件的个性，例如组件内的状态、生命周期

最常见的 hooks 有如下：

useState
useEffect
其余
useState
首先给出一个例子，如下：

import React, {useState} from 'react';
 
function Example() {
  // 申明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p >
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在函数组件中通过 useState 实现函数外部保护 state，参数为 state 默认的值，返回值是一个数组，第一个值为以后的 state，第二个值为更新 state 的函数

该函数组件等价于的类组件如下：

class Example extends React.Component {constructor(props) {super(props);
    this.state = {count: 0};
  }
 
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p >
        <button onClick={() => this.setState({ count: this.state.count + 1})}>
          Click me
        </button>
      </div>
    );
  }
}

从上述两种代码剖析，能够看出两者区别：

state 申明形式：在函数组件中通过 useState 间接获取，类组件通过 constructor 构造函数中设置
state 读取形式：在函数组件中间接应用变量，类组件通过 this.state.count 的形式获取
state 更新形式：在函数组件中通过 setCount 更新，类组件通过 this.setState()
总的来讲，useState 应用起来更为简洁，缩小了 this 指向不明确的状况

useEffect
useEffect 能够让咱们在函数组件中进行一些带有副作用的操作

同样给出一个计时器示例：

class Example extends React.Component {constructor(props) {super(props);
    this.state = {count: 0};
  }
 
  componentDidMount() {document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {document.title = `You clicked ${this.state.count} times`;
  }
 
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p >
        <button onClick={() => this.setState({ count: this.state.count + 1})}>
          Click me
        </button>
      </div>
    );
  }
}

从下面能够看见，组件在加载和更新阶段都执行同样操作

而如果应用 useEffect 后，则可能将雷同的逻辑抽离进去，这是类组件不具备的办法

对应的 useEffect 示例如下：

import React, {useState, useEffect} from 'react';
function Example() {const [count, setCount] = useState(0);
 
  useEffect(() => {    document.title = `You clicked ${count} times`;  });
  return (
    <div>
      <p>You clicked {count} times</p >
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect 第一个参数承受一个回调函数，前端培训默认状况下，useEffect 会在第一次渲染和更新之后都会执行，相当于在 componentDidMount 和 componentDidUpdate 两个生命周期函数中执行回调

如果某些特定值在两次重渲染之间没有发生变化，你能够跳过对 effect 的调用，这时候只须要传入第二个参数，如下：

useEffect(() => {document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

上述传入第二个参数后，如果 count 的值是 5，而且咱们的组件重渲染的时候 count 还是等于 5，React 将对前一次渲染的 [5] 和后一次渲染的 [5] 进行比拟，如果是相等则跳过 effects 执行

回调函数中能够返回一个革除函数，这是 effect 可选的革除机制，相当于类组件中 componentwillUnmount 生命周期函数，可做一些革除副作用的操作，如下：

useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);
    }
 
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
});

所以，useEffect 相当于 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合

其它 hooks
在组件通信过程中能够应用 useContext，refs 学习中咱们也用到了 useRef 获取 DOM 构造 ……

还有很多额定的 hooks，如：

useReducer
useCallback
useMemo
useRef

三、解决什么
通过对下面的初步意识，能够看到 hooks 可能更容易解决状态相干的重用的问题：

每调用 useHook 一次都会生成一份独立的状态
通过自定义 hook 可能更好的封装咱们的性能
编写 hooks 为函数式编程，每个性能都包裹在函数中，整体格调更清新，更优雅

hooks 的呈现，使函数组件的性能失去了裁减，领有了类组件类似的性能，在咱们日常应用中，应用 hooks 可能解决大多数问题，并且还领有代码复用机制，因而优先思考 hooks