React题目

React

1.什么是React？它有哪些特点？

React是一个用于构建用户界面的JavaScript库。

它具有以下特点：

组件化：React使用组件来构建复杂的UI，并提供了高度的可重用性和模块化。

虚拟DOM：React使用虚拟DOM进行高效的DOM操作，减少了直接操作DOM的开销。

单向数据流：React采用单向数据流（自上而下）的架构模式，简化了状态管理。

JSX语法：React使用JSX语法，将HTML和JavaScript组合在一起，提供了更直观的编写方式。

2.react的优缺点

优点：

1）提高了应用性能和开发效率

2）使用JSX,代码可读性好

3）react的componentWillUnmount生命周期，能够清除相关所有事件，避免内存泄露

4）并不直接对DOM进行操作，引入了一个虚拟DOM的概念，安插在js和真实DOM中间，性能好，速度快 

缺点：每次 state 更改，render 函数都要生成完整的虚拟 DOM. 哪怕 state 改动很小，render函数也会完整计算一遍。如果 render 函数很复杂，这个过程就白白浪费了很多计算资源

3.什么是React组件？有哪两种类型的组件？

React组件是构建用户界面的独立和可复用的代码单元。

React组件分为两种类型：

函数组件：以纯函数的形式定义，接收一个属性对象作为参数，返回一个React元素。

类组件：通过继承React.Component类创建，使用render()方法返回一个React元素。

4.函数组件与类组件的区别是什么

React函数组件和类组件是用于创建和管理UI的两种不同的组件类型。

它们之间有以下区别：

1）定义方式：

函数组件：使用函数的形式定义组件，如下所示：

function MyComponent(props) {

  return <div>Hello, {props.name}!</div>;

}

类组件：通过继承React.Component类来定义组件，如下所示：

class MyComponent extends React.Component {

  render() {

    return <div>Hello, {this.props.name}!</div>;

  }

}

1. 状态和生命周期：

函数组件：函数组件是无状态的，不能直接使用React生命周期方法。但是，可以使用React的Hooks（如useState、useEffect等）来处理状态和副作用逻辑。

类组件：类组件可以定义和使用状态（使用this.state）以及使用React生命周期方法（如componentDidMount、componentDidUpdate等）。

3）代码结构：

函数组件：函数组件通常比较简洁，只需编写一个函数即可完成组件的定义和逻辑。

类组件：类组件通常包含构造函数、渲染方法以及其他可能需要的生命周期方法，相对来说更加复杂一些。

4）性能：

函数组件：由于函数组件没有实例化的过程和额外的类实例开销，相对于类组件来说，函数组件在某些情况下具有更高的性能。

类组件：由于类组件使用了React的底层机制来处理状态和生命周期，可能会引入一些额外的开销。

总体而言，函数组件更简洁、通用，并且是React中使用Hooks的前提条件。类组件则提供了更多的灵活性，特别适用于需要状态和生命周期方法的场景。在选择使用哪种组件类型时，可以根据具体的需求和项目需求进行权衡和选择。值得注意的是，React官方推荐在新项目中使用函数组件和Hooks来编写UI逻辑。

5.React中的状态是什么？如何管理组件的状态？

状态（State）是组件内部的数据，可以根据需要进行修改和访问。在类组件中，状态通过this.state进行管理，使用this.setState()方法来更新状态。在函数组件中，可以使用React的useState钩子来创建和管理状态。

6.什么是React生命周期方法？列举几个常用的生命周期方法。

生命周期方法用于控制组件在不同阶段的行为。常用的生命周期方法包括：

constructor()：组件构造函数，在组件实例化时调用。

render()：渲染方法，输出组件的UI。

componentDidMount()：组件挂载后调用，可以进行异步操作和请求数据。

componentDidUpdate()：组件更新后调用，用于处理更新后的操作。

componentWillUnmount()：组件销毁前调用，用于清理工作和取消订阅。

不常用的有：（了解）
● getDerivedStateFromProps，更新state和处理回调。
● shouldComponentUpdate，用于性能优化。
● getSnapshotBeforeUpdate，替代了componentWillUpdate。

7.VUE与React两个框架的区别对比 

相似之处：

用于创建UI的js库

使用起来轻快便捷

都用了虚拟DOM

都是基于组件的架构

不同点 ：

vue使用的html模板；react使用的是js

vue有双向绑定语法

vue增加了语法糖computed和watch等，react需要自己写逻辑来实现

react用了jsx语法

react整体思路是编程式，推荐组件化，数据不变，单向数据流；vue数据可变，双向绑定，声明式的写法

8.什么是状态（state）和属性（props）？它们之间有什么区别？

相同点：都是普通的js对象，他们包含着影响渲染输出的信息，在React中，状态（state）和属性（props）是组件中用于存储和传递数据的两个主要概念。

不同点：

state是数据结构，只能使用setState来改变

props是组件的属性，由父组件传递给子组件，props是不可以改变的

state是局部的，是组件自己管理数据，控制自己的状态，除了它所在的这个组件其它组件都无法访问

没有state的叫做无状态组件，有state的叫有状态组件

多用props，少用state

9.常用的hooks函数有哪些

useState： 用于在函数组件中声明和管理状态。

useEffect： 用于在函数组件中执行副作用操作（如订阅、操作DOM等），可以在组件挂载、更新和卸载时进行操作。

例如：useEffect(() => {

  // 副作用逻辑

  return () => {

    // 清除副作用的逻辑

  };

}, []);

useContext： 用于在函数组件中访问React上下文（Context）。

例如：const contextValue = useContext(Context);

useReducer： 用于在函数组件中使用Reducer模式来管理复杂的状态逻辑。

例如：

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

useCallback： 用于在函数组件中缓存回调函数，以避免不必要的重新创建。

例如const memoizedCallback = useCallback(() => {

  // 回调函数逻辑

}, [dependency]);

useMemo： 用于在函数组件中缓存计算结果，以避免不必要的重新计算。

例如const memoizedValue = useMemo(() => {

  // 计算逻辑

  return computedValue;

}, [dependency]);

useRef： 用于在函数组件中创建可变的引用，可以在组件渲染之间保留值，不触发重新渲染。

例如const refContainer = useRef(initialValue);

10.什么是JSX和它的特性

JSX（JavaScript XML）是React中一种用于构建用户界面的语法扩展，它允许我们在JavaScript代码中编写类似HTML结构的代码。

以下是JSX的主要特性：

1. 声明性： JSX提供了一种声明性的方式来描述用户界面的结构和外观，类似于编写HTML模板，使代码更易读、理解和维护。

2）JavaScript表达式： 在JSX中，可以直接嵌入JavaScript表达式，用花括号{}包裹。这样可以在标记内部进行动态计算和引用变量。

3）组件支持： JSX允许我们以标签形式使用自定义组件，将代码组织成可复用的组件，实现模块化开发。

4）属性传递： JSX中的标签可以带有属性，用于向组件传递数据或配置选项。

5）样式类名： 为了与JavaScript语法保持一致，JSX中使用className来定义元素的样式类，而非class属性。

6） 注释： JSX中可以使用JavaScript风格的注释，将注释内容用花括号包裹起来。

7）防止XSS攻击： JSX在渲染时会自动进行转义，避免了常见的跨站脚本攻击（XSS）安全漏洞。

注意事项：

JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代

所有标签必须形成闭合，成对闭合或者自闭合都可以

JSX中的语法更加贴近JS语法，属性名采用驼峰命名法  class -> className  for -> htmlFor

JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现