react的组件的两种形式

Posted 2020-11-27 zhouyideboke

1.如果需要传参，在函数中加一个props参数来接受，并且必须向外return一个合法的jsx创建的虚拟DOM。

//1. 组件名首字母为大写 2. 必须return 合法的jsx
// 这里就可以相当于子组件
function Hellow (props){
//props为父组件传过来的数据
//如果打印props的话，只要子组件用的到东西都会打印出来,在这里没有用到父组件中的a数据，因此只会打印出前三个来。
return <div>
姓名: {props.name}, 性别: {props.sex}, 年龄: {props.age}
</div>
}
// 这里就想当于父组件
const person = {
name: ‘zs‘,
sex: ‘gener‘,
age: 12,
a: 2
}
//将组件渲染到页面上来
// 有两个参数分别为,1.填写组件，2. 将组件渲染到指定的位置，也就是指定的DOM元素上。
ReactDOM.render(<div>
//1. 使用ES6的展开运算符
<Hellow {...person}/>
//2. 直接赋值
<Hellow name=‘zs‘ sex=‘gener‘ age={12}/>
//3. 使用`.`的形式，父组件
<Hellow name={person.name} sex={person.sex} age={person.age}/>
</div>document.getElementById(‘app‘))

2. 使用class关键字来创建组件

这种方法也是最常用的一种方式          

  

最基本的创建组件结构

 

class World extends React.Component{ render(){ return<div>这是一个组件</div> } }

 

例如：

// 父组件
// 创建组件和虚拟DOM
import React from ‘react‘
//实现虚拟DOM操作并且渲染到页面指定的容器中
import ReactDOM from ‘react-dom‘
//1. 创建参数，给子组件使用
const person = {
name: ‘zs‘,
sex: ‘gener‘,
age: 23
}
//2. 导入子组件
import World from ‘./Component/World‘
//3. 渲染到页面上
ReactDOM.render(
<div><World {...person}/></div>, document.getElementById(‘app‘)
)

//子组件
export default class World extends ReactDOM.Component{
constructor(props){
// 父类构造函数的引用
super(props)
// this.state是当前class组件私有数据
this.state= {
msg: ‘zs‘,
info: ‘hellow‘
}
}
//render是一个生命周期中的函数
render(){
return <div>
{this.state.msg},
{this.props.name}
</div>
}
}

1. 用构造函数创建的组件没有状态
2. 用class创建的组件有状态
3. 两种组件的本质的区别为state属性