React从入门到精通教程01

最新推荐文章于 2024-07-20 12:05:39 发布

中南滴水哥

最新推荐文章于 2024-07-20 12:05:39 发布

阅读量1.3k

点赞数 5

分类专栏： React 文章标签： react javascript reactjs

本文链接：https://blog.csdn.net/qq_43742385/article/details/117924703

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

React从入门到精通教程

系列教程(持续更新中…)：

React简介

官方文档
1. 英文官网: https://reactjs.org/
2. 中文官网: https://react.docschina.org/
React使用来干什么的
1. 用于构建用户界面的 JavaScript 库，是一个将数据渲染为HTML视图的开源JS库。React只关心视图。
为什么需要React
1. 原生JS操作DOM繁琐，效率低
2. 使用JS直接操作DOM,浏览器会进行大量的重绘重排
3. 原生JS没有组件化编码方案，代码复用低
React特点
1. 声明式而非命令式：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。
2. 组件化：构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。React 组件让您可以将 UI 拆分为独立的、可重用的部分，并单独考虑每个部分
3. 一次学习，随处编写

React基础

React的使用

通过在script标签中引入React所需要的静态文件可快速使用
通过一些工具，例如creat-react-app脚手架来快速的搭建一个React项目

Hello World

无论学习什么语言，输出hello world总会是我们学习的第一步，我们今天也通过这个小小的案例来初识React

<html>
    <body>
        <!-- 准备好容器 -->
        <div id="test"></div>
    </body>
    <!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
    <script src="../js/react.development.js" type="text/javascript"></script>
    <script src="../js/react-dom.development.js" type="text/javascript"></script>

    <script src="../js/babel.min.js" type="text/javascript"></script>

    <!--这里使用了babel用来解析jsx语法-->
    <script type="text/babel">
            // 1.创建虚拟DOM
            const VDOM = <h1>Hello</h1>  //这个地方使用的是JSX语法，不需要加""
            // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
            ReactDOM.render(VDOM,document.getElementById("test"));        
    </script>
</html>

1.先导入三个包：

【先引入react.development.js，后引入react-dom.development.js】

react.development.js  核心包
react-dom.development.js 提供操作DOM的react扩展库。
babel.min.js  // 将JSX转为JS的包，之前我们使用的时候是ES6转成JS

2.创建一个容器

<div id="test"></div>

3.创建虚拟DOM，渲染到容器中

const VDOM = <h1>Hello</h1>
/* 虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面 */

以上就是基本使用React的一个完整步骤，后面会慢慢了解里面的详细内容

JSX

在上面的hello world的例子中，我们只用了如下语法：

const VDOM = <h1>Hello</h1>

这种看起来像JS，又像HTML的语言，是一种JS的语法拓展，叫做JSX，JSX可以生成React中的最小渲染单元–’元素‘，后续只要使用ReactDOM.render()就可以将这个元素渲染到容器中，为什么要使用JSX呢，下面是官方文档的原话：

在这里插入图片描述

JSX可以简化我们开发React的工作，可以带来极大的方便，但如果你不熟悉这种语法，你也可以使用React提供的原生JS函数createElement()来做同样的事。JSX只是帮我们调用了这个函数而已

React.createElement(
  type,
  [props],
  [...children]
)
/*
第一个参数是必填，传入的是似HTML标签名称，eg: ul, li
第二个参数是选填，表示的是属性，eg: className
第三个参数是选填, 子节点，eg: 要显示的文本内容
*/

举一个如下例子：

//JSX写法：

class Hello extends React.Component {
    render() {
        return <div>Hello, { this.props.toWhat }</div>
    }
}

ReactDOM.render(
    <Hello toWhat=‘world’>,
    document.getElementById(‘root’)
)

// 转化为原生JS后的写法

class Hello extends React.Component {
    render(){
        return React.createElement(‘div’,null, `Hello,${this.props.toWhat}`)
    }
}

ReactDOM.render(
    React.createElement(‘Hello’, { toWhat: ‘world’ }, null),
    document.getElementById(‘root’)
)

这个函数不理解不要紧，我们一般情况下都会使用JSX，下面我们来具体学习JSX的相关语法

定义

定义一个JSX元素的时候，我们不能使用引号包裹我们的元素，但是如果JSX元素有很多行，我们可以使用()包裹，并且一个JSX元素只能有一个根元素，超过一个会报错

var element = "<h1> hello world </h1>"  // 错误，这个不是JSX，而是普通的JS，定义了一个字符串常量
var element = <h1> hello world </h1><h1> hello world </h1>  // 错误，一个JSX只能有一个根标签
var elemnt = <h1>
    Hello, {formatName(user)}!
  </h1> //正确，可以被（）包裹
var element = (<div>
        <h1>hello world</h1>
        <h1>hello world</h1>
    </div>)  //正确，只有一个根元素

在JSX中嵌入JS表达式

可以在JSX中使用{}嵌入任何JS表达式

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX也是一个表达式

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。所以我们也可以将JSX当成表达式使用，作为函数参数返回，或者是在条件语句中使用。
```
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
```
JSX特定属性

既然我们可以在JSX中嵌入标签，那么我们也可以在JSX中为标签添加属性
```
const element = <div tabIndex="0"></div>; // 可以使用引号，来为属性设置不变的字面量
const element = <img src={user.avatarUrl}></img>; // 也可以使用大括号，为属性设置一个JS表达式
// 注意："{}"这种情况下）{}会被解析成字符串
```
警告：

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
JSX防止XSS（cross-site-scripting, 跨站脚本）攻击

既然可以在JSX中使用标签，那么我们就需要考虑安全性，最先考虑的即使XSS，但是我们完全不用担心自己在JSX中写的标签例如<script></script>会被执行。React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。
JSX表示对象

实际上，Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。，调用之后返回一个对象，这个对象称为React元素，例如
```
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
// 等价于
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
// 最后会生成为如下对象
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};
```
这些元素描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。

总结：
1. 全称: JavaScript XML
2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React****.createElement(component, props**, …children)**方法的语法糖
3. 作用: 用来简化创建虚拟DOM
  
  1) 写法：
```
var ele = <h1>Hello JSX!</h1>
```
  2) 注意1：它不是字符串, 也不是HTML/XML标签
  
  3) 注意2：它最终产生的就是一个JS对象
4. 标签名任意: HTML标签或其它标签
5. 标签属性任意: HTML标签属性或其它
6. 基本语法规则
  
  1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
  
  2) 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
  
  3）样式的类名指定不要使用class，使用className
  
  4）内联样式要使用双大括号包裹
  
  5）不能有多个根标签，只能有一个根标签
  
  6）标签必须闭合
  
  7）如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错；如果是大写字母开头，react就去渲染对应的组件，如果没有就报错

元素渲染

元素描述了我们想在页面上所希望看到的内容，那么我们定义了一个元素之后，这个元素只是一个虚拟的DOM，要怎么渲染到页面上呢。与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

将元素渲染为DOM
```
<div id="root"></div>
```
首先我们在HTML页面中需要一个容器来装载我们的这个元素，例如我们创建如上的标签。我们将其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。一般一个项目只有一个根节点
```
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
```
想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：

更新已经渲染了的元素

元素一旦定义就不可改变，一个元素就相当于某个特定时刻的UI，所以更新已经渲染了的元素的唯一方式就是重新调用render函数

// 计时器例子
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));}

setInterval(tick, 1000); // 每秒重新调用一次函数，函数内调用render，这样才能够更新页面