React Hooks面试突击

1. HTML5中控制路由的API有哪些？

• history.back()
• history.forward()
• history.go()
• history.pushState()
• history.replaceState()

2. React-Router有哪些路由组件及定义是什么？

• BroswerRouter: 使用history方式监控路由变化
• HashRouter: 使用hash方式监控路由变化
• Route: 定义路径对应的组件
• Link: 定义路由的跳转路径
• NavLink: 定义路由的跳转路径，且为已渲染元素添加参数
• Switch: 渲染第一个与路由匹配的子元素
• Redirect: 定义路由的重定向

3. useState是什么，怎么使用？

• 定义：可以在函数组件中使用状态
• 使用：

const Message = () => {
    const [message, setMessage] = useState("");
    
    return (
        <div>
            <input 
                type="text"
                value={message}
                onChange={(e) => {
                const val = e.target.value;
                setMessage((prev) => prev + val);
                }}
            />
            <p>{message}</p>
        </div>
    );
};

4. useEffect是什么，怎么使用？

• 定义：

  • 可以使React中的函数组件在渲染后执行副作用操作
  • 有两个参数： 第一个参数为渲染后执行的函数操作，第二个参数是useEffect被重新执行所依赖的state/props数组。

• 使用：

const MouseTracker = () => {
    const [position, setPositions] = useState({x: 0, y: 0);
    useEffect(() => {
        const updateMouse = (e) => {
            setPositions({x: e.clientX, y: e.clientY});
        };
        document.addEventListener('click', updateMouse);
        return () => {
            document.removeEventListener('click', updateMouse);
        }
    });
    return (
        <p>X: {position.x}, Y: {position.y}</p>
    )
}