React 中的状态

状态是指某个时间点对应的数据.

分为有状态.和无状态

有状态:能定义state的组件,类组件就是有状态组件

无状态:

不能定义state的组件,函数组件一般叫做无状态组件

2019年2月06日.React v16.8引入了React Hooks, 从而函数式组件也能定义自己的状态.

无状态组件的场景:

组件本身不需要有状态.不需要变化.一般用于写死

组件本身就没有状态,有可能只需要从外部传入的状态

特点:

状态可以被改变.会影响到视图变化.

作用:

保存数据.

同时数据会影响视图

// 提取组件
import React, { Component } from 'react'

//状态定义方法1
// export default class Add extends React.Component {
//   // 继承的时候,子组件一旦有construtor ,constructor 内部必须调用 super()
//   constructor() {
//     super()
//     this.state = {
//       age: 18
//     }
//   }
//   render () {
//     return <h1>Add</h1>
//   }
// }

// 第二种简写
// 方法1 和方法2 的差异. construtor new的对象 可以传参当作状态 一般数据来自后台.
// 推荐方法2
// state={} 不方便传参.写死用于下面.动态用于上面
export default class Add extends React.Component {
  state = {
    arr: [
      {
        id: '1',
        age: 18,
        name: '张三'
      },
      {
        id: '2',
        age: 19,
        name: '李四'
      },
      {
        id: '3',
        age: 20,
        name: '王五'
      }
    ]
  }
  render () {
    const { arr } = this.state
    return <>
      <ul>
        {arr.map((item) => (
          <li key={item.id}>
            <h1>姓名:{item.name}</h1>
            <p>年龄:{item.age}</p>
            <h5>是否成年:{item.age > 17 ? '已成年' : '未成年'}</h5>
          </li>
        ))}
      </ul>
    </>
  }
}

事件绑定

// 事件绑定方法
export default class Add extends React.Component {
  handclick (e) {
    console.log('Hello Word', e.target.innerHTML);
  }
  render () {
    return (
      <>
        <div>
          <button onClick={this.handclick}>按钮</button>
          <button onClick={(e) => {
            console.log("Java", e);
          }}>按钮2</button>
        </div>
      </>
    )
  }
}

Guess you like