React入门第三弹——有状态组件以及事件处理的相关（案例说明，一看就会）

前言

上篇文章主要讲了JSX语法入门和无状态组件的传值，内容还是比较简单的，今天给大家带来React入门第三弹——有状态组件和事件处理。

组件的分类

在React中,组件分为函数组件和class组件,也就是无状态组件和有状态组件。

• 函数式组件(无状态组件)
  直接定义函数的形式,不存在state,只会有props,它没有生命周期函数。

  // 函数式组件(无状态组件)
  function Hello() {
       
    return <h1>Hello,jianan</h1>
  }
  

• class组件(有状态组件)
  使用class定义、extends继承React.Component。有state进行数据的存储和管理,同时还可以拥有props,有生命周期函数。

  // class组件(有状态组件)
  class Hello extends React.Component {
       
    render() {
       
      return <h1>Hello jianan</h1>
    }
  }
  

无状态组件和有状态组件的使用规则

1. 因为数据的更改都是根据状态进行更改的,如果只是单纯的处理一些逻辑,而不需要改变数据的值就使用无状态组件。我们可以使用props进行组件间的通信和传值。
2. 如果需要改变某些数据的话,或是想要存储一些数据并且想要对这些数据进行一些增删改查的话,那么就应该使用有状态组件。我们使用的是state,数据会发生变化就会触发生命周期这些函数。

无状态组件和有状态组件传值的取用

• 无状态组件
  使用props传值时,使用props.属性名进行取用。
• 有状态组件
  使用props传值时,使用this.props.属性名进行取用。使用state定义状态时,使用this.state.属性名进行取用。

一般数据会通过父组件进行传递,这样就可以进行统一的数据管理,在父级进行一个集中的数据管理。以上是在没有使用redux的情况下,如果使用了redux的话,就会在redux中进行状态管理。

有状态组件

本篇文章我们先来学习有状态组件：
有状态的组件需要使用render方法进行渲染,是生命周期里面非常基础和底层的方法,一定要用它来进行渲染

<script type="text/babel">
    class Hello extends React.Component {
   // 有状态的组件需要使用render方法进行渲染,是生命周期里面非常基础和底层的方法,一定要用它来进行渲染
        render() {
   
            return <h1>hello weiyu</h1>
        }
    }
    ReactDOM.render(
        <Hello/>,
        document.getElementById("root")
    )
</script>

有状态组件props传值

需要传什么值直接写在组件的上面，渲染的时候直接使用单花括号 { this.props.name }

<div id="root"></div>
<script type="text/babel">
    class Hello extends React.Component {
   
        render() {
   
            return <div>
                <h1>这是一个有状态组件</h1>
                <h1>姓名：{
   this.props.name}</h1>
                <h1>年龄：{
   this.props.age}</h1>
                <h1>性别：{
   this.props.sex}</h1>
            </div>
        }
    }
    ReactDOM.render(
        <Hello name="weiwei" age="18" sex="男"/>,
        document.getElementById("root")
    )
</script>

有状态组件state

有状态组件中state在实际开发中通常采用以下写法：

<div id