React(1)

作者: Daeeman | 来源:发表于2023-06-26 17:14 被阅读0次

学习react no.1
ES5与ES6小结部分
Visual Studio Code作为React Native
【React Native学习笔记二】React基础
六、react基本概念
高阶组件装饰器演变过程如下：
Webpack从入门到出门（5）
React手脚架可以通过index访问的方法
React 创建组件
前端小知识10点（2019.4.14）

1. 概述

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

1.1 React 特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

1.2 安装

使用 create-react-app 快速构建 React 开发环境

（create-react-app 自动创建的项目是基于 Webpack + ES6 ）

执行以下命令创建项目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

2. 创建虚拟DOM的两种方式

2.1 JSX创建虚拟DOM

<body>
    <div id="text"></div>
    <script type="text/babel"> 
        const VDOM = <h1> Hello React</h1>
        ReactDom.render(VDOM,document.getElementById('test'))
    </script>
</body>

2.2 JS创建虚拟DOM

<body>
    <div id="text"></div>
    <script type="text/babel"> 
        const VDOM = React.createElement('h1',{id:'title'},'Hello React')
        ReactDom.render(VDOM,document.getElementById('test'))
    </script>
</body>

2.3 JSX好处

更容易编写React组件，因为可以使用HTML标签来描述组件的结构和样式。
可以添加注释，使代码更易于理解和维护。
可以在JavaScript代码中直接操作DOM元素，而不需要通过浏览器渲染页面。

JSX会被翻译成JS，只是JS的语法糖

2.4 虚拟DOM与真实DOM

虚拟DOM

本质是Object类型的一般对象
虚拟DOM比较轻，真实DOM比较重
虚拟DOM最终会被React转化为真实DOM，呈现在页面上

3. JSX语法规则

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

const VDOM = <h1> Hello React</h1>
const VDOM = "<h1> Hello React</h1>"   //加引号变成字符串

标签中混入JS表达式 [会产生一个存在或不存在的值] 时要用 { }

const myId = 'TITle'
const myData = 'Hello React'
const VDOM = (
    <h1 id={myId.toLowerCase()}> 
        <span>{myData}</span>
    </h1>
)

样式的类名指定不能用class，用className

const VDOM = (
    <h1 className="title"> 
        <span>hello</span>
    </h1>
)

内联样式要用style={{ key: value }}的形式去写

const VDOM = (
    <h1 style = {{color:'white',fontSize:'29px'}}> 
        <span>hello</span>
    </h1>
)

只能有一个根标签

const VDOM =(
    <div>
        <div></div>
        <div></div>
    </div>
) 

//多个根标签报错
const VDOM =(
    <div></div>
    <div></div>
)

所有标签必须闭合

const VDOM = (
    <input type="text"></input>
)

const VDOM = (
    <input type="text" />
)

标签首字母
1. 若小写字母开头，则将标签转为html中同名元素，html中无对应元素报错
2. 若大写字母开头，react就把该标签渲染为组件，组件未定义则报错

//会被识别为组件
const VDOM = (
    <Hello></Hello>
)
//会被识别为html标签,找不到对应标签报错
const VDOM = (
    <good></good>
)

const data = [1,2,3,4]
const VDOM = {
    <div>
        <ul>
            {
                data.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })
            }
        </ul>
    </div>
}

4. 组件与模块

4.1 函数式组件

适用于简单组件的定义

<div id="test"></div>
<script type = 'text/babel'>
    <!-- 创建函数式组件 -->
    function MyComponent(){
        return <h2>我是用函数定义的组件</h2>
    }
    //渲染组件到页面，注意首字母大写，小写会被当做html标签
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))
</script>

4.2 类式组件

类

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

<script type = 'text/javascript'>
        //创建一个Person类
        class Person {
            //构造器方法
            constructor(name, age) {
                console.log(this);//构造器中的this是，类的实例对象（new是谁就是谁）
                this.name = name
                this.age = age
            }
            //一般方法
            speak() {
                //spack方法放在了哪里？--类的原型对象上，供实例使用
                console.log(this);
                //通过Person实例调用speak时，speak中的this就是Person实例
                console.log(`我叫${this.name},我的年龄是${this.age}`)
            }
        }
        // 创建一个Person的实例对象
        const p1 = new Person('tom', 18)
        const p2 = new Person('jack', 19)
        p1.speak()
        p2.speak()
 
   
</script>

继承

class Student extends Person {
    constructor(name, age, grade) {
        super(name, age)
        this.grade = grade 
    }
    //重写从父类继承过来的方法
    speak() {
        console.log(`我叫${this.name},我的年龄是${this.age}，我的班级是${this.grade}`)
    }
    //一般方法
    study() {
        //study方法放在了哪里？类的原型对象上，供实例使用
        console.log("我爱学习")
    }
}

const s1 = new Student('tina', 20,'5年级')
console.log(s1);
s1.speak()

类式组件(简单)

必须继承React.Component
必须有render，且render必须有返回值

<script type = 'text/javascript'>
    //1.创建类式组件
    class MyComponent extends React.Component{
        //render放在哪？--MyComponent的原型对象上，供实例使用
    //render中的this是谁？--MyComponent的实例对象
        render(){
            return  <h2>我是类定义的组件</h2>
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test")
    //  执行了ReactDOM.render(<MyComponent/>,document.getElementById("test")后
    //  1.React解析组件标签，找到了Mycomponent组件
    //  2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
    //  3.将render返回的虚拟DOM转为真实DOM，随后呈现到页面中
</script>

5. state

state最好写成对象

<script type = 'text/javascript'>
   //1.创建类式组件
   class MyComponent extends React.Component{
       constructor(props){
     super(props)
     this.state = {isHot:true}
   }
       render(){
     //读取state
     const {isHot} = this.state
           return  <h2>今天的天气很{isHot?'炎热:凉爽'}</h2>
       }
   }
   //2.渲染组件到页面
   ReactDOM.render(<MyComponent/>,document.getElementById("test")
   
</script>

6. 事件绑定

原生事件绑定

<button id="btn1"> 按钮1 </button>
<button id="btn2"> 按钮2 </button>
<button onclick = "click()"> 按钮3 </button>
<script type = 'text/javascript'>
    const btn1 = document.getElementById('btn1')
  btn1.addEventListener('click',()=>{
    alert('按钮1被点击')
  })
  
  const btn2 = document.getElementById('btn2')
  btn2.onclick = ()=>{
     alert('按钮2被点击')
  }
    
  function demo(){
    alert('按钮3被点击')
  }
</script>

react事件绑定

把原生的onclick换成onClick
方法外不能加引号
方法不能加括号

<script type = 'text/javascript'>
    //1.创建类式组件
    class MyComponent extends React.Component{
        constructor(props){
      super(props)
      this.state = {isHot:true}
    }
        render(){
      //读取state
      const {isHot} = this.state
            return  <h2 onClick={demo}>今天的天气很{isHot?'炎热:凉爽'}</h2>
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test")
    
  function demo(){
    console.log('标题被点击')
  }
</script>

<script type = 'text/javascript'>
    //1.创建类式组件
    class Weather extends React.Component{
        constructor(props){
      super(props)
      this.state = {isHot:true}
    }
        render(){
      //读取state
      const {isHot} = this.state
            return  <h2 onClick={changeWeather}>今天的天气很{isHot?'炎热:凉爽'}</h2>
        }
    changeWeather(){
        
    }
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test")
    
  
</script>

学习react no.1
学习react no.1 react 定义 react 特点 react
ES5与ES6小结部分
1var React=require('react'); 等价 import React from ' react...
Visual Studio Code作为React Native
1、React Native Tools 2、React-Native/React/Redux snippets ...
【React Native学习笔记二】React基础
一、React JSX基础 1、React.js和React Native关系 2、React Native原理 ...
六、react基本概念
1、react-dom和react为什么要分开因为还有react-dom、react-canvas、react-a...
高阶组件装饰器演变过程如下：
import React from 'react'// 1 原始版本class Reg extends React...
Webpack从入门到出门（5）
(如转载，请注明出处) 1.安装react npm install react -D react react-do...
React手脚架可以通过index访问的方法
1、主要依赖react,react-dom,react-scripts 2、生成项目目录 create-react...
React 创建组件
1.React 创建一个组件 import React ,{Component} from "react";==>...
前端小知识10点（2019.4.14）
1、React.PureComponent 与 React.Component 的区别React.PureComp...