react的useState的使用方法

前言：

       在react16.8版本后新增加了hook，这里来记录下hook里面的State Hook

具体使用：

1、引入

import React, { useState } from 'react'

2、定义一个变量digitalFlopData ，并提供更改他的方法为setData，

注意，这里的setData不是固定的，是可以自己定义的

export default () => {
  const [digitalFlopData, setData] = useState([])

}

3、定义一个函数，并在函数中给我们刚的变量赋值

createData()

function createData() {
    setData(getData())
  }

4、定义数据函数getData

function getData() {
  return [
    {
      title: '管养里程',
      number: {
        number: [randomExtend(20000, 30000)],
        content: '{nt}',
        textAlign: 'right',
        style: {
          fill: '#4d99fc',
          fontWeight: 'bold',
        },
      },
      unit: '公里',
    }
  ]
}

5、在界面上使用我们的变量 digitalFlopData

return (
    <div id="digital-flop">
      {digitalFlopData.map(item => (
        <div className="digital-flop-item" key={item.title}>
          <div className="digital-flop-title">{item.title}</div>
          <div className="digital-flop">
            <DigitalFlop config={item.number} style={{ width: '100px', height: '50px' }} />
            <div className="unit">{item.unit}</div>
          </div>
        </div>
      ))}

      <Decoration10 />
    </div>
  )

到此为止！