React(1)

2023-06-26  本文已影响0人  Daeeman

1. 概述

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

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

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

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

1.1 React 特点

1.2 安装

（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好处

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

2.4 虚拟DOM与真实DOM

虚拟DOM

3. JSX语法规则

  1. 定义虚拟DOM时，不要写引号
const VDOM = <h1> Hello React</h1>
const VDOM = "<h1> Hello React</h1>"   //加引号变成字符串
  1. 标签中混入JS表达式 [会产生一个存在或不存在的值] 时要用 { } 
const myId = 'TITle'
const myData = 'Hello React'
const VDOM = (
    <h1 id={myId.toLowerCase()}> 
        <span>{myData}</span>
    </h1>
)
  1. 样式的类名指定不能用class，用className
const VDOM = (
    <h1 className="title"> 
        <span>hello</span>
    </h1>
)
  1. 内联样式要用style={{ key: value }}的形式去写
const VDOM = (
    <h1 style = {{color:'white',fontSize:'29px'}}> 
        <span>hello</span>
    </h1>
)
  1. 只能有一个根标签
const VDOM =(
    <div>
        <div></div>
        <div></div>
    </div>
) 

//多个根标签报错
const VDOM =(
    <div></div>
    <div></div>
)
  1. 所有标签必须闭合
const VDOM = (
    <input type="text"></input>
)

const VDOM = (
    <input type="text" />
)
  1. 标签首字母
    1. 若小写字母开头，则将标签转为html中同名元素，html中无对应元素报错
    2. 若大写字母开头，react就把该标签渲染为组件，组件未定义则报错
//会被识别为组件
const VDOM = (
    <Hello></Hello>
)
//会被识别为html标签,找不到对应标签报错
const VDOM = (
    <good></good>
)

eg

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 类式组件

类

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

类式组件(简单)

<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

<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事件绑定

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

1

<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>
上一篇下一篇

猜你喜欢

热点阅读