React从0开始（一）：JSX基础

小阿托
375 阅读3分钟

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

一、先创建一个React应用

要求：安装Node≥ 8.10，安装npm≥ 5.6

进入项目文件夹，创建React项目

npx create-react-app my-react
cd my-react
npm start

二、React应用目录结构

|-- my-react,
    |-- .gitignore
    |-- README.md
    |-- package-lock.json
    |-- package.json
    |-- yarn.lock
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |   |-- logo192.png
    |   |-- logo512.png
    |   |-- manifest.json
    |   |-- robots.txt
    |-- src
        |-- App.css
        |-- App.js,
        |-- App.test.js
        |-- index.css
        |-- index.js
        |-- logo.svg
        |-- reportWebVitals.js
        |-- setupTests.js

入口文件：/src/index.js

三、JSX基础

1.用JSX创建React元素

基本语法：

const VDOM = <h1>Hello React</h1>

本质上，JSX是Javascript的一种语法扩展，它能够用来更加简单地描述UI，我们也可以通过React.createElement(component,props,...children)来进行React元素的创建，JSX就是React.createElement的一个语法糖

//JSX写法
const VDOM = (
    <ul className="list">
        <li></li>
    </ul>
)
//React.createElement写法
React.createElement("ul",{ className:"list" },React.createElement("li",null,"react"))
//若是有多个元素，那JSX与createElement的方法哪个更方便一目了然

2.React元素的挂载

通过查看public/index.html中代码可知，我们可将React元素挂载到ID为root的根元素下，这时就用到了ReactDOM.render方法，以下是JSX中元素的挂载：

const VDOM = <h1>Hello React</h1>;
//ReactDOM.render参数：元素，挂载的父元素
ReactDOM.render(VDOM,document.getElementById('root'));

3.JSX中的JS代码

JSX本质上也是JS，可以通过花括号包含相应表达式，花括号内的代码会按照逻辑运行，如下：

const VDOM = <h1>{1+1}</h1>;
//ReactDOM.render参数：元素，挂载的父元素
ReactDOM.render(VDOM,document.getElementById('root'));

4.JSX中的元素属性

  1. 属性的命名：这个知识点常在笔试题中见到，JSX的元素属性命名使用的是驼峰命名，如class属性在JSX中写为className,font-size命名为fontSize

  2. 属性内容：属性的内容可以是：表达式、字符串，还可以通过解构props对象进行元素属性的配置

let props = { className:"list" }
const App = (
    <ul>
        <li>hello</li>
    </ul>
)
return <App ...props />

5.JSX的其他注意事项

  1. 使用JSX时，需引入react库
  2. 组件的首字母一定要大写
  3. 标签名不能使用表达式，若想使用表达式配置元素标签，就必须先设置一个大写开头变量作为中间变量，随后用该变量作为标签名
  4. style变量：需要用到两层花括号{}，第一层：用于表示内部是一个表达式(对象)，第二层：用于表示样式的对象

四、JSX深入

  1. JSX的编译：在编译时，JSX会被编译为React.createElement的一个调用，随后通过React.createElement返回一个叫做React Element的Javscript对象（JSX可以看做是React.createElement的一个语法糖，写JSX实际上就是在操作Reacr.createElement且更加简单易懂）。

  2. React.createElement流程解析：

    • 传入参数：type（标签名，如div等）、props（属性对象）、childrens(子元素对象)
    • 格式化传入的数据并传给ReactElement函数，ReactElement函数根据数据生成ReactElement对象，返回给React.creatElement
    • 由React.createElement将得到的ReactElement对象返回给开发者

  3. 调用ReactDOM.render(ReactElement,Container,[callback])对ReactElement对象进行渲染

    • ReactElement：由第二步返回的ReactElement对象
    • Container：所要挂载到的父元素（一般是ID=root的根元素下，document.getElementById('root')）
    • [callback]：回调函数，可以在渲染结束后做一些事情

  4. 流程总结：

    1. JSX代码编译（Babel）
    2. React.createElement调用ReactElement，返回ReactElement对象
    3. ReactDOM.render利用ReactElement对象进行渲染

  5. 流程图如下：

    graph TD
JSX代码 --> Babel编译 --> 调用React.createElement --> 调用ReactElement方法 --> 返回ReactElement对象 --> ReactDOM.render对ReactElement对象进行渲染 --> 真实DOM
avatar
文章
阅读
粉丝