React基础

Posted 2021-08-18 MaNqo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React基础相关的知识，希望对你有一定的参考价值。

一、React基础

JSX是react的不可缺少的部分，所以在这里先看一下javascript XML(JSX)到底是什么:

React定义的一种类似于XML的JS扩展语法：JS+XML
本质是React.createElement(component, props, ...children)方法的语法糖
作用：用来简化创建虚拟DOM
它不是字符串，也不是html/XML标签，最终产生的就是一个JS对象
标签名任意，HTML标签或者其他的标签

（XML早期用于存储和传输数据）

—接下来进入正文—

a. React创建虚拟DOM

准备好一个容器
引入react核心库文件
引入react_dom,用于支持react操作dom

引入babel,用于将jsx转为js

babel在编译后开启了严格模式

<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

接下来就是写jsx，而jsx一定要写在babel中。这里在创建虚拟DOM的时候不需要写引号，因为它不是字符串。下面说一下为什么要使用jsx而不是js。
```
<script type="text/babel">  
    // 1. 创建虚拟DOM
    const VDOM = <h1>Hello,React</h1>
    // 2. 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
```
此时打开浏览器的控制台，会发现下面这两段代码，可以暂时忽略，在后面的学习中会有详细的方法解决的。
如果不想通过jsx来创建虚拟DOM，还有另外一种方式可以创建虚拟DOM：
```
<script type="text/javascript">  
    // 1. 创建虚拟DOM
    const VDOM = React.createElement('h1',{id:'title'},'Hello,React')
    // 2. 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
```
但是这种方法的话在有一些场景用起来是比较麻烦的，比如说，你想要在这个新创建的div中嵌套一个span，此时无法直接把span标签直接加在 hello,React 两端的，在这种情况下，span会渲染到页面中。

也就是说，此时如果你想要嵌套一个span，那么就要再次React.createElement，通过用上面两种方法来实现效果如下：
```
//jsx 
const VDOM = <h1><span>Hello,React</span></h1>
// js
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React');
```
明显可以看出来，当我们要嵌套多个标签时，使用js是十分繁琐的，而jsx的出现，让我们可以更加简便的创建虚拟DOM。

b.虚拟DOM和真实DOM

1. 虚拟DOM

本质是Object类型的对象(一般对象)
虚拟DOM的属性比较少，真实DOM的属性比较多(重)，因为虚拟DOM是React内部再用，无需真实DOM上那么多的属性。
虚拟DOM最终会被React转化为真实DOM，呈现再页面中。

2. `JSX`语法规则

定义虚拟DOM时，不要写引号

标签中混入JS表达式时要用 {}

const myId = 'atubjs'
const myData = 'hello,react'
const VDOM = (
 <div>
  <h1 className='title' id={myId.toLowerCase()}>
      <span style={{color:'orange',fontSize:'30px'}}>{myData.toLowerCase()}</span>
  </h1>
<h1 className='title' id={myId.toUpperCase()}>
      <span style={{color:'orange',fontSize:'30px'}}>{myData.toLowerCase()}</span>
  </h1>
</div>
)

注意这里一般不写class而是用className
内联样式，要用style={{key:value}}的形式去写
虚拟DOM必须只有一个根标签，也就是说整个VDOM的所有标签被有且仅有一个根标签包裹住，如上案例的最外层的div。
标签必须闭合
标签首字母（1）若小写字母开头，则将该标签转为html中同名元素，若html中无该标签i对应的元素，则报错。（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

3. jsx动态生成li

const data = ['Angular', 'React', 'Vue'];
<ul>
    {
        data.map((item, index) => {
            return <li key={index}>{item}</li>
        })
    }
</ul>

二、 React面向组件编程

首先先来认识以下模块和组件。

模块
- 一般一个js文件就是一个模块
- 作用：复用js，简化js的编写，提高js的运行效率
组件
- 用来实现局部功能效果的代码和资源的集合等(html/css/img等)
- 作用：复用编码，简化项目编码，提高运行效率

接下来详细讲一下组件，首先是函数式组件

a. 函数式组件

创建函数时组件，函数名首字母最好是大写，因为在渲染的时候，如果函数名首字母是小写标签的话，会因为被识别为非HTML标签而报错。
渲染组件到页面中
```
function MyComponent() {
    console.log()
    return <h2>函数定义[适用于简单组件]的组件</h2>
}
ReactDOM.render(<MyComponent/>, document.getElementById('test'));
```
此时点开控制到中的Components，就可以看到创建的这个MyComponent组件。

在执行了ReactDOM.render() 之后，

（1）React解析组件标签，找到了MyComponent组件；

（2）发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

b. 类式组件

这里如果对类不熟悉的话，可以先回去复习一下类，下面先对类进行一个小小的总结。

类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super时必须要调用的
类中所定义的方法，都是放在了类的原型对象上，供实例去使用

创建类组件

class MyComponent extends React.Component {
    // 这里的render和return都一定要写！
    render() {
        return <h2>类定义[适用于复杂组件]的组件</h2>
    }
}
ReactDOM.render(<MyComponent />, document.getElementById('test'));

在执行了ReactDOM.render() 之后，

（1）React解析组件标签，找到了MyComponent组件；

（2）发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。而render中的this就是：

MyComponent的实例对象 <=> MyComponent组件实例对象

（3）将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

c. 组件实例三大核心属性

这部分的内容比较多，单独写在这篇笔记里面

1. state

2. props

3. refs

d.收集表单数据

包含表单的组件分类：

非受控组件

class Login extends React.Component {
    handleSubmit = (event) => {
        event.preventDefault();  // 阻止表单提交
        const { username, password } = this;
        alert(`用户名：${username.value}, 密码：${password.value}`);
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                用户名：<input ref={c => this.username = c} type="text" name="username" />
                密码：<input ref={c => this.password = c} type="password" name="password" />
                <button>登录</button>
            </form>
        )
    }
}

受控组件

能够通过输入值控制state的值

class Login extends React.Component {
    state = {
        username: '', //用户名 
        password: ''  //密码
    }
    saveUsername = (event) => {
        this.setState({ username: event.target.value });
    }
    savePassword = (event) => {
        this.setState({ password: event.target.value });
    }
    handleSubmit = (event) => {
        event.preventDefault();  // 阻止表单提交
        const { username, password } = this.state;
        alert(`用户名：${username.value}, 密码：${password.value}`);
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                用户名：<input onChange={this.saveUsername} type="text" name="username" />
                密码：<input onChange={this.savePassword} type="password" name="password" />
                <button>登录</button>
            </form>
        )
    }
}