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

Posted 2023-02-18 усил

为什么会有 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>)