在react中,构造函数,就是一个最基本的组件
如果想要把组件放到页面中,可以把 构造函数的名称,当作 组件的名称,以 html标签形式引入页面中即可
注意:react在解析所有的标签的时候,是以标签的首字母来区分的,如果标签的首字母是小写,那么就按照 普通的 html 标签来解析,如果 首字母是大写,则按照 组件的形式去解析渲染
结论:组件的首字母必须是大写
function hello(props) { // 在组件中,如果想要使用外部传递过来的数据,必须,显示的在 构造函数参数列表中,定义 props 属性来接收; // 通过 props 得到的任何数据都是只读的,不能从新赋值 // props.name = '000' return <div> <h1>这是在hello组件中定义的元素 --- {props.name}</h1> </div> }
// 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 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') } }
import react from 'react' // 在 function 定义的组件中,如果想要使用 props,必须先定义,否则无法直接使用 // 但是,在class定义的组件中,可以直接使用 this.props 来直接访问,不需要预先接收 props export default function hello(props) { // console.log(props) return <p>haha --- {props.name}</p> }
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创建出来的组件,这两种不同的组件之间的本质区别就是:有无state属性!!!
有状态组件和无状态组件之间的本质区别就是:有无state属性!
如对本文有疑问, 点击进行留言回复!!
Agora 开源 | 一个 Demo,帮你快速实现社交直播四大场景
vuejs (2)- Vue 生命周期 和 VueJS ajax
网友评论