本文已参与「新人创作礼」活动，一起开启掘金创作之路。

通过前面的学习我们已经大概了解了react的一些基础知识，那么接下来我们就开始继续学习react的组件，props以及state。我们都知道组件react中很重要的一部分，可以说整个react项目都是由react组件组成的。那么react的组件怎么写呢？接下来我们来介绍
首先react的组件分为两种：
1.class组件
2.函数组件
那么下面我将注意介绍这两种组件的区别

class组件

无参数的class组件

class组件就是使用es6的class类来定义组件，先来个小栗子：

// person.js
import React from 'react';
class Person extends React.Component {
    render(
        <div>hello world</div>
    );
}

export default Person

这个class类最简单的定义方法, React.Component是react的一个抽象基类，所有的class组件都是基于这个基类创建的，里面的render函数是必须实现的方法，它的使用也很简单

// App.js
import Person from './Person'; // 将组件引入进来

// 将组件放到你应用的地方
<Person />或者<Person></Person>

上面的这个class组件栗子是最简单的静态组件，里面没有任何参数

有参数的class组件

先上代码

// 父组件 App.js
import Person from './Person';
<Person code="123"/>

// 子组件
import React from 'react';

class Person extends React.Component {
  constructor() {
    super()
  }
  render() {
    return (
      <div>{this.props.code}</div>
    )
  }
}

class组件中有一个props的属性，内部存放着组件传进来的参数，使用方法就是this.props.参数名称。这个里面的参数当前组件是不能改的，只有父组件才能修改。组件传参是不是非常简单。
上面说了，props传递的参数不能在使用的组件内进行修改。但是组件中肯定需要一些变量来对组件进行渲染，交互的，那此时怎么办呢？别着急，在class组件中还有另一个属性能够使用，那就是state。state是干什么的呢？其实state就是一个存储定义变量的对象，我们先看一下state怎么定义

// person.js
import React from 'react';

class Person extends React.Component {
  constructor() {
    super()
    
    this.state = {
        count: 10
    }
  }
  render() {
    return (
      <div>{this.props.count}</div>
    )
  }
}

state的定义也非常简单，在constructor中使用

this.state = {
    count: 10,
    obj: {},
    list: []
}

如此的话就定义了内部状态随便用了，这是定义，下面就来说说如何更新state, class组件中的更新不能像变量赋值一样，而是需要一个叫做setState()的方法来更新

import React from 'react';

class Person extends React.Component {
  constructor() {
    super()
    this.state = {
        count: 10
    }
    this.updateState = this.updateState.bind(this)
  }
  
  updateState(){
      this.setState(state => ({
          count: state.count + 1
      }))
  }
  render() {
    return (
      <div>{this.props.count}</div>
      <button onClick={updateState}>更新state</button>
    )
  }
}

setState方法使用方法，可以传递对象，也可以传函数

this.setState({
    count: this.state.count + 1
})

this.setState(state => ({
    count: state.count + 1
}))

this.setState({
    count: 12
})

这就是state的定义和更新以上说的是class组件，以及class组件里面的props和state，接下来咱们说说函数组件

函数组件

无参数的函数组件

首先我们先看下函数组件

function () {
    return <div>子组件</div>
}

函数组件很简单，就是一个函数，返回dom节点，其参数传递就和普通函数的参数传递一样

// Person.js
function Person(props) {
    return <div>{props.name}</div>
}
export default Persion


// App.js
<person name="张三" />

这就是函数组件的props，简单到让你不敢相信。
同样的函数组件除了接受外部传参之外，也需要内部状态才能使组件变得活灵活现。但是函数组件的state和class组件的state有很大的不同，这里面涉及了react的hook useState,我在这里简单说一下，之后会在(hooks学习)里详细介绍

// 首先我们看一下useState的定义
import React, { useState } from 'react'

function Person() {
    const [count, setCount] = useState(0) 
    const updateState = ()=>{
        setCount(10)
    }
    return (
    <div>
        <div>{count}</div>
        <button onClick={updateState}>更新state</button>
    </div>
    )
}

export default Person;

我们来解读一下这句代码 const [count, setCount] = useState(0);
首先const [count, setCount] 这是定义了两个变量，count是我们要展示或者使用的变量,setCount是用来更新count变量的方法，使用方法呢就是 setCount(10),同样的setCount()也可以传递函数

setCount(count => setCount(count+1))

$\color{red}注意：count和setCount这两个变量不是固定的,你可以随意起名字，但是最好还是见名知意$ 其次useState(0)是为count变量进行初始化， $\color{red}同时要记住useState初始化只会执行一次，重渲染的时候不会再次初始化$
至于是为什么会在useState Hook中讲到

以上就是本次讲的内容，都是比较显现，通俗易懂的，非常适合初学者学习
在此，先祝各位读者新年快乐🎉🎉🎉🎉🎉

react学习(3)-组件和props, state

class组件

无参数的class组件

有参数的class组件

函数组件

无参数的函数组件