React是什么?(精读React官方文档—01)

简介: React是什么?(精读React官方文档—01)

这是我参与更文挑战的第14天,活动详情查看:更文挑战

React是什么?

关于React是什么,我们首先看一下官方是如何进行介绍的。“React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。”

到底什么是声明式编程?要想准确理解声明式编程,我们首先要知道什么是命令式编程,命令式编程是指的详细的告诉计算机该怎么做,来达到我们的目的,声明式编程则是命令式的编程的方面,只告诉计算机我们想要的结果,至于底层怎么实现,则不是我们所关心的,这就是声明式编程的通俗化理解。

什么是组件?

官方定义:将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。

解读:我们可以理解为能够组成一个UI界面的每一个独立的代码片段,例如表单的代码集合,轮播图的代码集合,讲这些能够构成特定功能的代码集合我们称之为组件。

React.component子类

我们以下面这段代码为例,进行详细的分析:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

官方描述:ShoppingList是React的一个组件类。一个组件接收一些参数,我们把这些参数叫做 props(“props” 是 “properties” 简写),然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。render 方法的返回值描述了你希望在屏幕上看到的内容。React 根据描述,然后把结果展示出来。更具体地来说,render 返回了一个 React 元素,这是一种对渲染内容的轻量级描述。大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法,JSX 可以让你更轻松地书写这些结构。

解读:

  1. 组件接收的参数叫做props.
  2. render方法返回的结果就是渲染到屏幕上我们看到的结果。
  3. render函数中包含的是JSX语法,这个和JS语法不同。

JSX语法

官方描述:在 JSX 中你可以任意使用 JavaScript 表达式,只需要用一个大括号把表达式括起来。每一个 React 元素事实上都是一个 JavaScript 对象,你可以在你的程序中把它当保存在变量中或者作为参数传递。

解读:

  • 官方明确的说了再JSX中可以任意使用JS表达式,但是需要通过大括号括起来。
  • 此处我们要注意,官方说的可是JS表达式,所以我们首先要明确一点什么是JS表达式,if语句算是JS表达式吗?我们看下面的这个例子。

image.png

  • ,在这个例子中React会报错,因为if语句不算表达式,到底什么才是表达式呢?请继续往下看。
  • 表达式的定义:下面的定义摘录自MDN,表达式是一组代码的集合,它返回一个值。具体的解释,请看JS表达式(MDN)
相关文章
|
2月前
|
前端开发 JavaScript API
【第54期】一文读懂React文档
【第54期】一文读懂React文档
60 1
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
59 0
|
2月前
|
前端开发 JavaScript API
React 生态系统:路由、状态管理、调试、测试、组件库、文档……
React 生态系统:路由、状态管理、调试、测试、组件库、文档……
59 0
|
2月前
|
前端开发 安全 JavaScript
React 正式推出全新官方文档!
React 正式推出全新官方文档!
|
8月前
|
前端开发
react导出word文档?
react导出word文档?
|
前端开发 JavaScript 物联网
React组件库Concis | 组件突破50+,移动端concis起步,新增英语文档,持续更新中...
对于不熟悉这个项目的小伙伴们做个简单的介绍,Concis是一个基于React+TypeScript开发的一款轻量级组件库,全面拥抱React生态,支持React新特性(hooks/redux)追求轻量的组件体积,简单的使用方式,最小的思维负担。
93 1
React组件库Concis | 组件突破50+,移动端concis起步,新增英语文档,持续更新中...
|
JavaScript API
看文档不如看源码? - React-Redux 源码解析
react-redux 的源码不太适合阅读,本身常用的 API 不多,只是 Provider 和 connect,而且都很好理解,这源码没必要还是不要看了,太绕了一点都不享受 🤦‍♂️。
|
前端开发 JavaScript 开发者
React 组件文档套件设计
在编写 React UI 组件时为了方便开发者使用组件,我们经常会使用文档系统来自动生成组件文档和定义文档。开源中比较出名的是 storybook,还有 react-styleguidist。
|
资源调度 前端开发 JavaScript
React 新的文档用到了哪些技术?
前言 https://beta.reactjs.org React 的新的文档已经 完成了 70 % 并且呼吁社区进行翻译工作。 新的文档采用了全新的架构 next.js + Tailwind CSS
351 0