react创建组件的2种方式以及如何赋值

---

1、使用function构造函数进行创建

---

function Tem (props){
  // 接收传来的值，用props
  console.log(props)
  return <h1>这是Tem组件</h1>
}

const person = {
  name: 'aa',
  age: 13,
  text: '这是人'
}

ReactDOM.render(<div>

  123
  {/* 为组件传值 */}
  <Tem name={person.name}></Tem>
  {/* 当属性多的时候，我们可以用es6中的扩展运算符 */} 
  <Tem {...person}></Tem>
</div>,document.getElementById('root'))

---

2、使用class关键字创建

---

引入react相关的依赖

import React from 'react'
//props是只读的，state是可读可写的
class 组件名称 extends React.Component{
	// 在构造器中一定要先调用super函数
    //由于组件继承了父类React.Component，所有在自定义的构造器中，一定要调用super()
    constructor(){
        super()
        //只有调用了super，才能使用this关键字
        this.state = {//这里的state相当于Vue中的data() { return {} }，state就是组件的私有数据
            msg: '我是state中的数据'
        }
    }

	//赋值到话就和小程序差不多
	this.setState({
		msg: '值被修改了'
	})

	// render主要是渲染当前组件对应的虚拟dom元素
	render(){
		return <div>这是创建的组件</div>
	}
}

export default 组件名称

2种方式的区别

props用来接收数据，由于无状态组件没有state和生命周期函数，运行效率比有状态组件好一点

1、使用function函数创建的组件，是无状态组件，他只有props，不能访问this；只是单纯的渲染（现在的react在Hook也可以了）；后缀名是.jsx

2、使用class关键字创建的组件，是有状态的组件，里面有自己的生命周期函数，也有props；后缀名是.js；可以访问this

---

3、使用this.setState赋值

---

在这个页面我们渲染了一个msg数据，想要点击按钮改变值只需要调用this.setState就可以，用过小程序的应该都知道，和小程序赋值差不多

注意：this.state赋值是一个异步的操作
我们不能这样写

	handClick = () => {
        this.setState({
            msg: 34343434
        },(() => {
        	//正确写法
			console.log(this.state.msg)
		}))
    }
    //在这里是获取不到修改后的msg的，正确的写法实在setState的回调函数里面打印
    console.log(this.state.msg)

```bash
import React, { Component, Fragment } from 'react'

class TodoList extends Component {
    constructor(props){
        //只有调用了super函数，才能使用this
        super(props)
        this.state = {
            msg: '1212121'
        }

        //在这里对this指向进行赋值，就不用再定义方法中写bind(this)了
        this.handClick = this.handClick.bind(this)
    }

    handClick = () => {
        this.setState({
            msg: 34343434
        },(() => {
            console.log(this.state.msg)
        }))
    }

    // render函数作用是渲染当前组件的虚拟dom结构
    render() {
        return (
            <Fragment>
                <div className={obj.aaa}>{this.state.msg}</div>
            </Fragment>
            
        )
    }
}


export default TodoList