react最新笔记

近日学习react17.0.2版本的笔记，不多讲了上教程加代码

• • 新建项目
  • 关于React
  • React JSX
  • React面向组件编程

新建项目

1. npm install -g create-react-app 全局安装
2. create-react-app my-app 新建并对react项目进行命名（注:项目名称不能有大写）
3. cd my-app
4. num run start

PS：以上是webpack创建react项目方式 本人也只用过webpack其他方式暂时先不做。

关于React

英文官网: https://reactjs.org/

中文官网: https://react.docschina.org/

其优点
1.声明式编码

2.组件化编码

3.React Native 编写原生应用

4.高效（优秀的Diffing算法）
还是不讲废话了 直接来开始react的使用

React JSX

学习react的时候这个是必看的

1. JSX全称: JavaScript XML

2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是

   React.createElement方法的语法糖

3. 作用: 用来简化创建虚拟DOM

4. 写法：var ele =

   Hello JSX!

   注意1：它不是字符串, 也不是HTML/XML标签

   注意2：它最终产生的就是一个JS对象

5. 标签名任意: HTML标签或其它标签

6. 标签属性任意: HTML标签属性或其它

7. 基本语法规则
   遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
   遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

8. babel.js的作用
   浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
   只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

React面向组件编程

注意点

1. 组件名必须首字母大写

2. 虚拟DOM元素只能有一个根元素

3. 虚拟DOM元素必须有结束标签

组件三大核心属性1: state

import React,{Component} from "react";
export default class StateTest extends Component{
    constructor(props){
      super(props)
      this.state={
          my:'5555'
      }
    }
        render(){
            const abc = this.state //state的
            console.log(abc);   //{'my:5555'}
            return(
                <div>我是state组件</div>
            )
        }
}

来看一下输出结果

对于state的理解

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

注意:组件中render方法中的this为组件实例对象

组件自定义的方法中this为undefined，如何解决？

1. 强制绑定this: 通过函数对象的bind()
2. 箭头函数

状态数据，不能直接修改或更新

组件三大核心属性2: props

import React,{Component} from "react";

export default class Props extends Component{
    constructor(props){
        super(props)
        console.log(props)
    }
    render(){
        return(
            <div>
                 真的挺牛逼的
            </div>
        )
    }
}

组件三大核心属性3: refs与事件处理

1. 字符串形式的ref

   <input ref="input1"/>

2. 回调形式的ref

   <input ref={(c)=>{this.input1 = c}}

3. createRef创建ref容器

import React, { Component } from "react";


export default class InputRef extends Component {

    constructor(props) {
        super(props)
        this.inputdiv = React.createRef()
    }
    getvalue() {
        console.log(this.inputdiv.current.value)  //能获取input中的值
    }
    render() {
        return (
            <form>
                <input type='text' ref={this.inputdiv}></input>
                <button onClick={() => this.getvalue()}>获取</button>
            </form>
        )
    }
}

4. 事件处理

   1. 通过onXxx属性指定事件处理函数(注意大小写)
   2. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
   3. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
   4. 通过event.target得到发生事件的DOM元素对象

import React, { Component } from "react";

export default class Ref extends Component{
    constructor(props){
        super(props)
        
        this.mydiv = React.createRef()
        this.inputidv = React.createRef()
        
    }
    componentDidMount(){
        console.log(this.mydiv.current)
    }
    render(){
        return(
            <div ref={this.mydiv}>
              995
            </div>
        )
    }
}

this.my.current能获取Dom

明天继续更新