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

两种创建组件方式的对比

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

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

栏目
文章分类
728_90 cn stocks