react-组件

react中的组件组件

react组件介绍

在React中，构造函数，就是一个最基本的组件
如果想要把组件放到页面中，可以把 构造函数的名称，当作 组件的名称，以 HTML标签形式引入页面中即可
注意：React在解析所有的标签的时候，是以标签的首字母来区分的，如果标签的首字母是小写，那么就按照 普通的 HTML 标签来解析，如果 首字母是大写，则按照 组件的形式去解析渲染
结论：组件的首字母必须是大写

function Hello(props) {
  // 在组件中，如果想要使用外部传递过来的数据，必须，显示的在 构造函数参数列表中，定义 props 属性来接收；
  // 通过 props 得到的任何数据都是只读的，不能从新赋值
  // props.name = '000'
  return <div>
    <h1>这是在Hello组件中定义的元素 --- {props.name}</h1>
  </div>
}

class和function

//  class 实现面向对象的新形式

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.say = function () {
  console.log('娃哈哈，你行吗？')
}
Person.info = 123

//变量声明提升
var p1 = new Person('zs', 20)
// console.log(p1.say())
// console.log(Person.info)





//  class 后面跟上类名， 类名后面，不需要加 () ，直接上 {}
class Per {
  // 在每个class类内部，都有一个 constructor 构造器， 如果没有显示定义 构造器，那么类内部默认都有个看不见的 constructor
  // constructor 的作用，就好比 咱们之前的 function Person(){ }
  // 每当，使用 new 关键字，创建 class 类实例的时候，必然会优先调用 constructor 构造器
  // constructor(){}
  // !定义在最对象上
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  //!定义在对象的原型上
  // 这是实例方法，必须通过 new 出来的对象调用
  say() {
    console.log('ok a ')
  }

  static info = 123

  static sayHello() {
    console.log('这是静态方法')
  }
}

var p2 = new Per('王多多', 22)
console.log(p2)
console.log(Per.info)
console.log(Per.sayHello())

class中的继承

父组件向子组件传递数据

class Person {
  constructor(name, age) {
    console.log(3)
    this.name = name
    this.age = age
  }

  say() {
    console.log('这是 Person中的 say 方法')
  }
  static info = 123
}


// 使用 extends 实现继承，extends 前面的是子类，后面的是父类
class Chinese extends Person {
  constructor(name, age, color, language) {
    console.log(1)
    // 注意： 当使用 extends 关键字实现了继承， 子类的 constructor 构造函数中，必须显示调用 super() 方法，这个 super 表示父类中 constructor 的引用
    super(name, age)
    this.color = color
    this.language = language
    console.log(2)
  }
}


// var p1 = new Person('zs', 12)
// console.log(p1)

var c1 = new Chinese('张三', 22, 'yellow', '汉语')
console.log(c1)
// 父类中任何东西，子类都能继承到
// c1.say();
// console.log(Chinese.info)


// 真正的面向对象语言是由 三部分组成： 封装、继承、多态
// 多态 和 接口、虚拟方法有关

//!Javascript没有多态，下面只是多态的介绍
class Animal {
  // 父类只定义了方法的名称，和作用，但是并没有具体的实现逻辑
  say() {
    // console.log('喵喵')
  }
}

class Cat extends Animal {
  // 当子类继承了父类之后，必然要继承父类中的方法，但是，发现say方法空有其壳，如果子类想要调用 say， 必须自己先实现这个方法，才能调用；
  say() {
    console.log('miaomiao')
  }
}

class Dog extends Animal {
  say() {
    console.log('wangwang')
  }
}

两种组件对比

function组件

import React from 'react'
// 在 function 定义的组件中，如果想要使用 props，必须先定义，否则无法直接使用
// 但是，在class定义的组件中，可以直接使用 this.props 来直接访问，不需要预先接收 props
export default function Hello(props) {
  // console.log(props)
  return <p>haha --- {props.name}</p>
}

class组件

import React from 'react'

// 使用 class 创建的类，通过 extends 关键字，继承了 React.Component 之后，这个类，就是一个组件的模板了
// 如果想要引用这个组件，可以把 类的名称， 以标签形式，导入到 JSX 中使用
export default class Hello2 extends React.Component {
  constructor(props) {
    // 注意： 如果使用 extends 实现了继承，那么在 constructor 的第一行，一定要显示调用一下 super()
    //  super() 表示父类的构造函数
    super(props)
    // 在 constructor 中，如果想要访问 props 属性，不能直接使用 this.props， 而是需要在 constructor 的构造器参数列表中，显示的定义 props 参数来接收，才能正常使用；
    // console.log(props)

    // 注意： 这是固定写法，this.state 表示 当前组件实例的私有数据对象，就好比 vue 中，组件实例身上的 data(){ return {} } 函数
    // 如果想要使用 组件中 state 上的数据，直接通过 this.state.*** 来访问即可
    this.state = {
      msg: '这是 Hello2 组件的私有msg数据',
      info: '瓦塔西***'
    }
  }
  // 保存信息1： No `render` method found on the returned component instance: you may have forgotten to define `render`.
  // 通过分析以上报错，发现，提示我们说，在 class 实现的组件内部，必须定义一个 render 函数
  render() {
    // 报错信息2： Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
    // 通过分析以上报错，发现，在 render 函数中，还必须 return 一个东西，如果没有什么需要被return 的，则需要 return null

    // 虽然在 React dev tools 中，并没有显示说 class 组件中的 props 是只读的，但是，经过测试得知，其实 只要是 组件的 props，都是只读的；
    // this.props.address = '123'

    // console.log(this.props)


    return <div>
      <h1>这是 使用 class 类创建的组件</h1>
      <h3>外界传递过来的数据是： {this.props.address} --- {this.props.info}</h3>

}

导入渲染组件

// 在使用 Hello 组件之前，先导入 组件
import Hello from './components/Hello.jsx'
import Hello2 from './components/Hello2.jsx'
// 注意： 以上两种创建组件的方式，有着本质上的区别，其中，
// 使用 function 构造函数创建的组件，内部没有 state 私有数据，只有 一个 props 来接收外界传递过来的数据；
// 使用 class 关键字 创建的组件，内部，除了有 this.props 这个只读属性之外，还有一个 专门用于 存放自己私有数据的 this.state 属性，这个 state 是可读可写的！
// 基于上面的区别：我们可以为这两种创建组件的方式，下定义了： 使用 function 创建的组件，叫做【无状态组件】；使用 class 创建的组件，叫做【有状态组件】
// 有状态组件和无状态组件，最本质的区别，就是有无 state 属性；同时， class 创建的组件，有自己的生命周期函数，但是，function 创建的 组件，没有自己的生命周期函数；
// 问题来了：什么时候使用 有状态组件，什么时候使用无状态组件呢？？？
//  1. 如果一个组件需要存放自己的私有数据，或者需要在组件的不同阶段执行不同的业务逻辑，此时，非常适合用 class 创建出来的有状态组件；
//  2. 如果一个组件，只需要根据外界传递过来的 props，渲染固定的 页面结构就完事儿了，此时，非常适合使用 function 创建出来的 无状态组件；（使用无状态组件的小小好处： 由于剔除了组件的生命周期，所以，运行速度会相对快一丢丢）

ReactDOM.render(<div>
  <Hello name="zs" age={20}></Hello>
  <Hello2 address="北京" info="程序员"></Hello2>
</div>, document.getElementById('app'))

两种创建组件方式的对比

1. 用构造函数创建出来的组件：专业的名字叫做“无状态组件”
2. 用class关键字创建出来的组件：专业的名字叫做“有状态组件”

用构造函数创建出来的组件，和用class创建出来的组件，这两种不同的组件之间的本质区别就是：有无state属性！！！
有状态组件和无状态组件之间的本质区别就是：有无state属性！