React基础

Posted 2023-02-24 MaNqo

一、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

1. 准备好一个容器

2. 引入react核心库文件

3. 引入react_dom,用于支持react操作dom

4. 引入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>
   

5. 接下来就是写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>
   

   此时打开浏览器的控制台，会发现下面这两段代码，可以暂时忽略，在后面的学习中会有详细的方法解决的。
   

6. 如果不想通过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面向组件编程

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

1. 模块

   • 一般一个js文件就是一个模块
   • 作用：复用js，简化js的编写，提高js的运行效率

2. 组件

   • 用来实现局部功能效果的代码和资源的集合等(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. 类式组件

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

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

创建类组件

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.收集表单数据

包含表单的组件分类：

1. 非受控组件

   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>
           )
       
   
   

2. 受控组件

   能够通过输入值控制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>
           )
       
   
   

   高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数

   1. 若A函数，接收的参数是一个函数，那么A就可以称为高阶函数。
   2. 若A函数，调用的返回值依然是一个函数，就可称A为高阶函数。

   常见的高阶函数：promise、setTimeOut、arr、map()等等。

   函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

加油~💪