React入门笔记（一）

# 开头

本笔记根据视频进度，由自己手写整理而成，仅限于学习交流。

# 一、认识React

# 1.1、什么是React

React是Facebook公司构建用户界面的JavaScript库，主要用于构建UI界面，于2013 年开源。

# 1.2、React特点

声明式设计
高效，采用虚拟DOM来实现DOM的渲染，最大限度地减少DOM的操作。
灵活，跟其他库灵活搭配使用。
JSX，相当于JS里面写HTML，JavaScript语法的扩展。
组件化、模块化。代码容易复用，大型项目非常喜欢使用React。
单向数据流。没有实现数据的双向绑定（对比Vue.js）。数据-视图-事件-数据

# 1.3、创建React项目

1.通过cdn链接导入(仅用于学习调试使用，不推荐)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

1
2

2.通过React脚手架创建项目来进行开发部署

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

1
2
3

3.项目生成后，目录结构大致为：

目录	作用
node_modules	node包管理目录，负责存储项目使用的依赖
public	存放index.html和图标，一般不去动它
src	存放编写React代码的目录

文件	作用
package.json	node项目包管理文件，记录项目信息、启动方式、依赖项名称以及版本号信息
public/manifest.json	pwa应用使用，用于记录应用信息
.gitignore	忽视git上传的文件信息，避免一些特殊的资源上传
src/index.js	核心文件，导入React所需的依赖，通过React渲染App.js的组件
src/App.js	一个函数式组件

# 1.4、运行项目

npm start

运行脚本后，浏览器将会自动打开一个3000端口的localhost网址，出现上述页面即为运行成功

# 1.5、编辑项目

在src/App.js中编辑代码，React可通过热更新进行自动编译，浏览器会自动重载

...
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          修改App.js代码，浏览器将会实时更新结果
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 二、React元素渲染

# 2.1、React渲染方法

在src/index.js中我们可以看到这样的代码

...
import App from './App';
...
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
...

1
2
3
4
5
6
7
8
9
10

得益于jsx的语法特性，我们能够将<App/>当作一个对象，通过React的render方法，渲染App对象，document.getElementById的作用是获取浏览器的id的元素，上述代码的意思是将<App/> 对象渲染，挂载在id为root的元素上，id为root的元素可以在public/index.html中找到：

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

1
2
3
4

我们可以将代码修改成这样：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

let app = <App />;
let root = document.getElementById("root");
ReactDOM.render(app,root);

1
2
3
4
5
6
7
8
9

同样的，App也可以是其他任意的元素：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

let h1 = <h1>你好世界</h1>
let root = document.getElementById("root");
ReactDOM.render(h1,root);

1
2
3
4
5
6
7

像h1这样的称为元素，元素是React的最小单位

注意：JSX元素对象或者组件对象必须只有一个根元素

举个例子：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

let h1 = <h1>你好世界</h1><h1>你好世界</h1>
let root = document.getElementById("root");
ReactDOM.render(h1,root);

1
2
3
4
5
6
7

这样是会报错的，因为没有一个根节点，要写成这样：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

let h1 = <div><h1>你好世界</h1><h1>你好世界</h1></div>
let root = document.getElementById("root");
ReactDOM.render(h1,root);

1
2
3
4
5
6
7

做一个小练习来熟悉react的渲染函数,我们实现一个能够不断刷新显示时间的函数，利用React的渲染，在这个例子中我们能够看到一个React的写法{}，他可以将定义好的变量插入元素中：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";


//实现页面时刻的显示
function clock(){
  let time = new Date().toLocaleTimeString()
  let root = document.getElementById("root");
  let element = <h1>现在的时间是：{time}</h1>

  ReactDOM.render(element,root)
}

setInterval(()=>{
  clock()
},1000)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2.2、React函数式组件初识

我们还可以把函数当成组件来进行编写，这也是React的一大特色，通过props属性，我们能够将一些值传入我们自己编写的组件中，React有class组件和function组件（函数式组件），这里我们采用函数式组件来编写：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

// React函数式组件
function Clock(props){
  return (
    <h1>现在的时间是：{props.date.toLocaleTimeString()}</h1>
  )
}

function run(){
  ReactDOM.render(
    <Clock date={new Date()}/>,
    document.getElementById('root')
  )
}

setInterval(()=>{
  run()
},1000)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

编辑

#React

上次更新: 2022/08/26, 15:52:02

React入门笔记（二）：JSX样式、组件初识→