react面试题

使用React Hooks好处是啥？
React中的useState（）是什么？
当调用setState时，React render 是如何工作的？
类组件和函数组件之间的区别是啥？
state 和 props 区别是啥？
什么是控制组件？
讲讲什么是 JSX ？

react生命周期

在React中，组件的生命周期分为三个主要阶段：

挂载阶段（Mounting）：
- constructor(): 构造函数，用于初始化组件的state和绑定事件处理函数。
- static getDerivedStateFromProps(): 类组件静态方法，用于在组件实例化或接收到新的props时运行，返回新的state或null。
- render(): 必须的方法，返回React元素来描述应该在屏幕上看到什么。
- componentDidMount(): 组件挂载到DOM后调用，适合进行数据的获取、设置定时器或其他副作用操作。
更新阶段（Updating）：
- static getDerivedStateFromProps(): 类组件静态方法，每次props或state改变时调用。
- shouldComponentUpdate(nextProps, nextState): 可选方法，用于决定组件是否需要更新。返回false可阻止不必要的渲染。
- getDerivedStateFromProps(): 类组件实例方法，与静态方法同名，但在旧版生命周期方法中使用。
- render(): 如果组件需要更新，再次调用。
- getSnapshotBeforeUpdate(prevProps, prevState): 在DOM更新之前调用，可以返回一个快照用于稍后使用。
- componentDidUpdate(prevProps, prevState, snapshot): DOM更新后调用，可用于进一步处理，比如网络请求或手动更新DOM。
卸载阶段（Unmounting）：
- componentWillUnmount(): 组件从DOM中移除之前调用，用于清理副作用，如取消定时器或订阅。

在React 16.8及之后的版本，随着Hooks的引入，函数组件可以通过useState、useEffect等Hooks来模拟生命周期行为。这些Hooks在函数组件内部使用，而不是作为生命周期方法：

useState(): 用于在函数组件中添加状态。
useEffect(): 用于模拟componentDidMount、componentDidUpdate和componentWillUnmount的行为，处理副作用。
useLayoutEffect(): 类似于useEffect，但保证在所有DOM更改完成并绘制之后执行。

请注意，一些旧的生命周期方法，如componentWillMount、componentWillReceiveProps和componentWillUpdate，已经被标记为不安全，并且在新的React版本中应该避免使用，因为它们可能导致意外的副作用和性能问题。

React的生命周期方法有哪些？

如果说生命周期方法，就是说类组件

官方生命周期图

React组件的生命周期方法可以分为几个主要阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）。以下是各个阶段的主要生命周期方法，但请注意，随着React 16.3及更高版本对生命周期方法的调整，一些方法已被废弃或标记为不安全，并推荐使用函数组件的Hooks来替代。

挂载阶段（Mounting）

constructor()：构造函数，用于初始化state和绑定this。
getDerivedStateFromProps()：静态方法，在组件实例被创建和接收到新的props时被调用，用于根据props计算state。
render()：必须实现的方法，用于返回React元素，描述组件的UI。
componentDidMount()：组件已经被渲染到DOM中后调用，适合进行DOM操作、数据获取等初始化工作。

更新阶段（Updating）

getDerivedStateFromProps()：在组件实例接收新的props或state更新前被调用。
shouldComponentUpdate(nextProps, nextState)：判断组件是否需要更新，返回布尔值。
render()：当组件确定需要更新时重新渲染UI。
getSnapshotBeforeUpdate(prevProps, prevState)：在DOM更新前调用，可以返回一个值供componentDidUpdate使用。
componentDidUpdate(prevProps, prevState, snapshot)：组件更新后立即调用，可以进行DOM操作或网络请求等。

卸载阶段（Unmounting）

componentWillUnmount()：组件即将卸载和销毁之前调用，用于清理工作，如取消网络请求、清除定时器等。

注意事项

废弃的方法：componentWillMount, componentWillReceiveProps, 和 componentWillUpdate 在React 16.3之后被标记为不安全，并在React 17中被废弃。建议使用getDerivedStateFromProps和getSnapshotBeforeUpdate替代，或改用函数组件和Hooks。
函数组件Hooks：对于函数组件，可以使用useState, useEffect, useRef, useContext, useReducer等Hooks来管理状态和生命周期逻辑。

随着React的发展，推荐使用函数组件和Hooks来编写新代码，因为它们提供了更简洁、灵活且易于理解的组件模型。

什么是React Hooks

React Hooks 是React 16.8版本引入的一个新特性，它允许你在不编写类组件的情况下使用状态和其他React特性。在React中，之前的状态管理和副作用处理主要通过类组件的生命周期方法来实现。而Hooks的引入使得函数组件也能拥有状态并执行副作用操作。

以下是一些React提供的核心Hooks：

useState: 这个Hook允许函数组件拥有自己的状态。它返回一对值，一个是状态变量，另一个是更新状态的函数。

jsx

   const [count, setCount] = useState(0);

useEffect: 用于在函数组件中执行副作用，比如数据获取、订阅、手动更改DOM等。它可以替换componentDidMount, componentDidUpdate, 和 componentWillUnmount。

jsx   useEffect(() => {
     // 数据获取、订阅等副作用
     document.title = `You clicked ${count} times`;
     // 清理函数
     return () => {
       // 卸载时执行的清理操作
     };
   }, [count]); // 只在count变化时重新运行

useContext: 让函数组件能够订阅React Context，无需使用类组件或this.context。

jsx

   const theme = useContext(ThemeContext);

useReducer: 类似于useState，但更适合管理更复杂的状态逻辑，类似于Redux的reducer。

jsx

   const [state, dispatch] = useReducer(reducer, initialState);

useRef: 创建一个可变的引用对象，它的.current属性被初始化为传递的参数（initialValue）。这个引用可以在组件的整个生命周期内保持不变。
useMemo 和 useCallback: 分别用于优化性能，确保某些计算或函数只在依赖项改变时才重新计算或创建。

Hooks 的引入使得代码更加模块化和可重用，减少了组件之间的复杂性，并提高了代码的可读性和可维护性。现在，大部分React开发都倾向于使用函数组件和Hooks来构建应用程序。

前端网络安全要求

前端网络安全是确保Web应用程序在用户浏览器端的安全性，防止恶意攻击和数据泄露。以下是一些前端网络安全的基本要求：

同源策略：确保所有请求遵循同源策略，即只允许与同一源（协议、域名和端口）的通信，以防止跨站脚本攻击（XSS）。
内容安全策略（CSP）：设置CSP头来限制加载的内容类型和来源，防止注入攻击。
XSS防御：使用编码和转义来防止跨站脚本，尤其是在动态生成HTML内容时。
CSRF防护：使用CSRF令牌来验证请求来源，防止未经授权的跨站请求。
数据验证：在客户端和服务器端都进行数据验证，防止非法数据输入。
HTTP头部安全：设置如X-XSS-Protection、X-Content-Type-Options、Content-Security-Policy等安全响应头。
非公开信息的隐藏：避免在前端显示敏感信息，如用户ID、密码提示、API密钥等。
错误处理：谨慎处理错误信息，避免暴露系统内部信息。
输入限制：限制用户输入的长度和格式，防止过度输入导致的内存溢出。
HTTPS加密：使用HTTPS协议确保数据传输的安全性。
版本管理：及时更新库和框架，修复已知的安全漏洞。
代码审计：定期进行代码审查，查找潜在的安全问题。
授权和权限控制：确保用户只能访问他们有权访问的资源。
防止点击劫持：使用frame-busting技术防止页面被嵌入到其他页面中。
资源完整性检查：利用Subresource Integrity（SRI）确保加载的外部资源未被篡改。
避免使用不安全的API：避免使用已知存在安全问题的JavaScript API。

前端安全是一个持续的过程，需要结合最新的威胁情报和技术发展来不断更新和强化。

React中常用的Hooks（钩子）函数

React中常用的Hooks（钩子）函数是React 16.8版本引入的功能，它们允许在函数组件中使用状态和其他React特性，而不需要编写类组件。以下是一些核心且常用的Hooks：

useState: 使函数组件具有状态。它接受一个初始状态作为参数，并返回一个状态变量和一个用于更新该状态的函数。

jsx

   const [count, setCount] = useState(0);

useEffect: 用于在函数组件中执行副作用操作，如数据获取、订阅或者手动改变DOM等。它类似于类组件中的componentDidMount, componentDidUpdate, 和 componentWillUnmount组合。

jsx   useEffect(() => {
     // 副作用操作
     return () => {
       // 清理副作用
     };
   }, [dependencyArray]);

useContext: 接收一个context对象（React.createContext的返回值）并返回该context的当前值。这使得在组件树中没有直接父子关系的组件之间能共享状态。

jsx

   const theme = useContext(ThemeContext);

useReducer: 用于管理组件内的复杂状态逻辑，它接受一个reducer函数和初始状态，返回当前状态和一个dispatch函数来分发action。

jsx

   const [state, dispatch] = useReducer(reducer, initialState);

useCallback: 返回一个记忆化的回调函数。当依赖项数组中的值没有变化时，返回的函数引用也不会改变，这有助于避免不必要的重新渲染。

jsx   const memoizedCallback = useCallback(
     () => { doSomething(a, b); },
     [a, b],
   );

useMemo: 用于记忆化计算结果。当依赖项没有改变时，返回的值将从缓存中获取，而不是重新计算。

jsx

   const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef: 创建一个可变的引用对象，其.current属性被初始化为传递的参数（initialValue）。返回的对象在整个组件的生命周期内保持不变。

jsx

   const inputRef = useRef(null);

useImperativeHandle: 用于自定义暴露给父组件的实例值。当使用ref时，可以自定义父组件如何访问子组件的实例。

jsx   useImperativeHandle(ref, () => ({
     focus: () => {
       inputRef.current.focus();
     },
   }), [inputRef]);

这些Hooks为React应用提供了强大的功能，使得状态管理和组件逻辑更加清晰和可维护。随着React的更新，可能会有更多新的Hooks被引入。