【明年找到好工作】React18面试题总结一

为什么会有 React Hooks

函数式组件的特点：

• 没有组件实例
• 没有生命周期
• 没有 state 和 setState，只能接收 props

class组件：

• 大型组件很难拆分和重构，很难测试（即 class 不宜拆分）
• 相同业务逻辑，分散在各个方法中，逻辑混乱
• 复用逻辑的复杂，如 Mixins、HOC、Render Prop

React 组件更易用函数表示

• React 倡导函数式编程， view = fn(props)
• 函数更灵活，更易拆分，更易测试
• 但函数组件太简单，需要增强能力 （Hooks）

---

函数组件实现 state 和 setState

• 默认函数组件没有 state
• 函数组件是一个纯函数，执行完即销毁，无法存储 state
• 需要 State Hook，即把 state 功能 “钩” 到纯函数中

const Clickbutton = () => {
    const [count, setCount] = useState(0);
    return (<button onClick={() => setCount(count + 1)}>点击{count}</button>)
}

---

React Hooks 如何模拟生命周期

• 默认函数组件没有生命周期
• 函数组件是一个纯函数，执行完即销毁，自己无法实现生命周期
• 使用 Effect Hook 把生命周期 “钩” 到纯函数中

模拟 class 组件 DidMount 和 DidUpdate

const Demo = () => {
    useEffect(() => {
      console.log('模拟 DidMount 和 DidUpdate'); 
    });
    return (<div>生命周期</div>)
}

单独模拟 class 组件的 DidMount

const Demo = () => {
    useEffect(() => {
      console.log('单独模拟 class 组件的 DidMount'); 
    }, []);
    return (<div>生命周期</div>)
}

单独模拟 class 组件的 DidUpdate

const Demo = () => {
    useEffect(() => {
      console.log('单独模拟 class 组件的 DidUpdate'); 
    }, [count]);
    return (<div>生命周期</div>)
}

模拟 class 组件的 willUnMount

const Demo = () => {
    useEffect(() => {
      let timer = setInterval(() => {
          console.log('定时器');
      }, 1000); 
      
      // 模拟 willUnMount
      return () => {
          clearInterval(timer)
      }  
        
    }, []);
    return (<div>生命周