darkcityX

Appearance

React 系列 ​

说说对 React 的理解？有哪些特性？ ​

是什么？ ​

  • React 是用于构建用户界面的 javascript 库, 只提供了 UI 层面的解决方法。

  • 遵循了组件化的开发模式、声明式编程范式和函数式编程概念，使前端应用程序的开发更加高效。

  • 使用虚拟 DOM 来有效地操作真实 DOM，遵循从高阶组件到低阶组件的单项数据流

  • 组件化开发模式，将界面划分成每个独立的小块，每个小块就是一个组件，可以相互组合、嵌套，构成整体页面

  • 使用 jsx 语法，被 babel 编译成合法的 JS 语句调用

特性 ​

  • 声明式编程

传送门：声明式编程 VS 命令式编程

** 声明式编程 ** 是一种编程范式，它更加关注结果，而不是如何做。

  • Component

在 react 中，一切皆组件。通常都会将应用程序的整个页面逻辑分解为晓得单个部分，即将其称之为组件。

组件既可以时一个函数也可以是一个类，接收数据传输，处理它并返回在 UI 中呈现的 React 元素。

jsx
// 函数式组件
const Header = () => {
  return (
    <Jumbotron style={{ backgroundColor: 'orange' }}>
      <h1>TODO App</h1>
    </Jumbotron>
  )
}

// 类组件（有状态组件）
class Dashboard extends React.Component {
  constructor(props) {
    super(props)

    this.state = {}
  }
  render() {
    return (
      <div className="dashboard">
        <ToDoForm />
        <ToDolist />
      </div>
    )
  }
}

开发组件的原则：

  • 专一性：符合单一职责设计原则，一个组件仅为一个任务或功能负责
  • 独立性：组件与组件之前相互独立，最好不直接进行通信
  • 拆分性：与其他组件解耦，不受其他组件的副作用影响能正常运行
  • 重组性：可以与其他组件进行组合和搭配
  • 替换性：提供同意的接口和使用方式，只要两个组件的接口一致，就可以轻松进行替换

  • JSX 语法

  • 单项数据流

  • 虚拟 DOM

优势 ​

  • 高效灵活

  • 声明式设计，使用更加高效

  • 组件是开发，提高代码复用率

  • 单向响应的数据流比双向绑定的更安全，速度更快

说说 Rel DOM 和 Virtual DOM 的区别及优缺点 ​

React 中组件如何通信 ​

大致可分为 5 种：

  • 父 向 子 通信:

react 的数据流向是单向的，所以最常见，通过 props 属性接收父组件传递过来的参数

  • 子 向 父 通信:

通过父组件向子组件传递一个函数，然后通过该函数额回调拿到子组件传过来的值

  • 兄弟组件 通信：

通过父组件作为中间层来实现数据的互通

  • 父向后代组件 通信：

使用 Context API实现。

  • 非关系组件 通信：

使用全局状态管理库实现。如 redux、mobx、 Zustand