react的环境搭建：防止标题重复

最新推荐文章于 2024-10-29 03:58:12 发布

代码caigou~旺旺旺

最新推荐文章于 2024-10-29 03:58:12 发布

阅读量236

点赞数

分类专栏： react 文章标签： react的环境搭建

本文链接：https://blog.csdn.net/ZMN0057/article/details/100586137

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、简介

React是Facebook退出的js库，只和用户的界面打交道。React的三大颠覆性的特点。

二、构建react应用程序

注意：默认电脑已经安装了npm和nodejs；node 版本要至少8.0以上的。
使用creat-react-app（官方脚手架）搭建react应用程序

npm install -g create-react-app  /*搭建一个全局的脚手架*/
create-react-app hello-world        /*创建项目 my-demo是项目名字*/
cd hello-world                      /*进入目录 然后启动*/
npm start

打开 http://localhost:3000/  查看。

注意：create-react-app hello-world 会自动执行 Installing react, react-dom, and react-scripts。
react.js 、react-dom.js 和 browser.min.js ，它们必须首先加载。
其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能， react-scripts有以下支持，都帮你配置好了：

React, JSX, ES6, and Flow syntax support.
Language extras beyond ES6 like the object spread operator.
Import CSS and image files directly from JavaScript.
Autoprefixed CSS, so you don’t need -webkit or other prefixes.
A build script to bundle JS, CSS, and images for production, with sourcemaps.
A dev server that lints for common errors.

在命令窗口输入的是npm start，而start调用的是 “start”: “react-scripts start”,

三、使用React

安装包：cnpm i react react-dom -S

react：专门用于创建组件和虚拟DOM，同时组件的生命周期都在这个包中；
react-dom：专门进行DOM操作的，最主要的应用场景是ReactDOM.render( )。

在index.html中，创建容器：

<!-- 容器：将来在使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中 -->
<div id="app"></div>

导入包

import React from 'react';
import ReactDOM from 'react-dom'

创建虚拟DOM元素

// 这是 创建虚拟DOM元素的 API    <h1 title="啊，五环" id="myh1">你比四环多一环</h1>
//  第一个参数： 字符串类型的参数，表示要创建的标签的名称
//  第二个参数：对象类型的参数， 表示 创建的元素的属性节点
//  第三个参数： 子节点
const myh1 = React.createElement('h1', { title: '啊，五环', id: 'myh1' }, '你比四环多一环')

渲染

// 参数1： 表示要渲染的虚拟DOM对象
// 参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象
ReactDOM.render(myh1, document.getElementById('app'))

特性一：组件：React的一切基于组件。

React最重要的特性时基于组件的设计流程。
使用React，唯一要关心的就是构件组件。
组件有着很好的封装性，组件让代码的复用，测试和分离都变得更加简单。
每个组件都有各自的状态，当状态变更时，便会重新渲染整个组件。

特性二：JSX语法

什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）

如何启用JSX语法？

安装babel插件

npm install --save-dev babel-loader @babel/core @babel/preset-env

安装能够识别转换jsx语法的包 babel-preset-react

npm install --save-dev @babel/preset-react

添加babel-loader配置项：

module: { //要打包的第三方模块
    rules: [
      {
          test: /\.js|jsx$/,
          use: {
              loader: 'babel-loader',
              options: {
                  presets: [
                     '@babel/preset-env',
                     "@babel/preset-react"
                  ]
              }
          },
          exclude: /node_modules/
      }
    ]
}

jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的；
在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS代码写到 { } 中

渲染数字;
渲染字符串
布尔值实现三元表达式
为属性绑定值 (不需要用引号)
渲染jsx元素（直接渲另一个jsx）
渲染jsx元素数组将普通字符串数组，转为jsx数组并渲染到页面上【两种方案】
在 jsx 中写注释：推荐使用{ /* 这是注释 */ };
为 jsx 中的元素添加class类名：需要使用className 来替代 class；htmlFor替换label的for属性;
在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
在 jsx 语法中，标签必须成对出现，如果是单标签，则必须自闭和！

当编译引擎，在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，如果遇到了 {} 就把花括号内部的代码当作普通JS代码去编译；

特性三：虚拟DOM（Virtual DOM）

DOM和虚拟DOM的区别：

DOM：浏览器中，提供的概念；用JS对象，表示页面上的元素，并提供了操作元素的API；
虚拟DOM：是框架中的概念；而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系；
- 本质：用JS对象，来模拟DOM元素和嵌套关系；
- 目的：就是为了实现页面元素的高效更新；

Diff算法

tree diff：在页面中的每一i层节点，都需要对比，整颗DOM树从上到下，对比一遍后，所有需要被按需更新的元素，必然能够被查找出来。
component diff：在对比DOM树中每一层的时候，会对每个组件进行对比，进行对比；
- 如果对比前后，组件类型相同，则暂时认为组件不要被更新；
- 如果对比前后，组价类型不同，则移除就组件，创建新组建，并把新组件替换到原来的位置；
element diff：组件中，元素级别的对比，叫做Element Diff。