react的基础知识整理

react基础知识整理

1.组件
react中定义组件有两种方式，分别是声明函数方式和声明类方式。
首相我们使用函数方式来创建组件

import React from 'react';
import ReactDOM from 'react-dom';
function  One(params) {
    console.log(params);
    return (<div>吃西红柿不吐葡萄皮{params.age}</div>)
}
let a=<div><One age={18}></One></div>
ReactDOM.render(a,document.getElementById('root'));

可以得到以下结果:

注意:
//函数组件的名字开头字母要大写
//因为组件每次使用，函数组件就会执行一次，根据实例传递的属性值不同，得到的渲染也不同。
//当组件行间传递属性的时候，如果想传递变量或者指定的js数据类型的值，那要加上大括号，这点类似vue中的v-bind ，代码中的age就是这样进行使用的。
// react组件里的数据流是单向的，vue和react是一样的
//可以在组件行间，注意，是行间写一个花括号，把一个存放多个键值对的对象存放到里面，用拓展收缩运算符展开，可以把每一个键值对当成行间属性存放在当前的组件中，如下:


2.class类的继承

class A {
    constructor(age){
      // 当你new A的时候此函数会立马执行，而且函数里的this是当前正在new的实例
      this.props = age; // 给当前实例增加私有属性
      this.name="erYA"
    }
    getX(){ // 给当前A的原型增加方法
  
    }
  
    static a = 100; // 把当前类A当做普通对象，给他增加私有属性
    getY = ()=>{ // 这种写法是给当前实例增加私有属性
  
    }
  }
  
  
   let a = new A(100);
   console.log(a);
  
   class B extends A { // 创建一个类B并且继承类A的私有和共有属性
    // 公共属性的继承：先让类B的实例__proto__指向自己的原型，然后原型的__proto__在指向类A的原型
    constructor(ss){
      console.log(ss,1);
      super(ss);
      console.log(ss,2);
      this.ss = 800;
    }
   }
  
   let  b = new B(400);
   console.log(b);
   // 这种继承方式就是react中用类创建组件的方式
  
  
  
  

//类B继承类A的私有和共有属性

3.用类创建组件
用户函数和用类创建是有区别的，首先，使用函数创建组件时是无状态的，没有生命周期，没有this，而类都有。

import React from 'react';
import ReactDOM from 'react-dom';

// 函数创建的组件时无状态的，没有生命周期， 没有this
// 用类创建组件 :有this，有生命周期，有状态
class Foo extends React.Component {
  // 在Foo类里constructor和render其实都是react生命周期里的一部分
  constructor(props) {
    console.log(props);
    super(props);
    console.log(this.props); // this就是当前正在创建的组件实例
    // 在constructor钩子函数执行的时候，还没有把从外界传递过类的属性放到props中
    // 如果不写形参props在这里你是取不到传递过来的属性的

    // 当执行constructor的时候，实例上的props默认是undefined，在后期才会给实例的props赋值，但是如果在constructor的super中传递实参props，那就会立即给实例的props赋值
  }
  render() {
    // render函数里的this是当前组件实例
    // 当使用此组件的时候，render函数就会执行，render函数return的值就是当前组件的结构

    // return (<div>我是类声明组件</div><div>我是类声明组件</div>) 最后return的react只能有一个根元素
    console.log(this);
    return (<div>
      {this.props.age}
    </div>)
  }

}

ReactDOM.render(<Foo age="100"></Foo>, document.getElementById('root'));