react---Hook

Hook是react中16.7新增的一个特性 主要是用来让无状态组件可以使用状态 在react开发中状态的管理是必不可少的 以前为了进行状态管理 我们需要使用类组件或者redux等来管理

---

普通的类组件使用状态

 class App extends React.Component{
   constructor(props){
     super(props)
     this.state={
       text:"我是状态数据"
     }
   }
   render(){
     return(
       <div>
        hello
         {this.state.text}
      </div>
     )
   }
 }

---

无状态组件想要使用状态

可以使用react 中Hook的useState来运行实现

useState是来定义一个状态的 他与类组件的状态不同，函数组件的状态可以是对象也可以是基础类型数据，useState返回的是一个数组 第一个是当前的状态值 第二个是对象表明用于更改状态的函数（类似setState）
代码如下

前提：

import React,{useState} from 'react';

需要引用useState

function App(props) {
  let [val, setVal] = useState(0)
  return (
    <div className="App">
      使用数据{val}
      <button onClick={() => { setVal(val + 1) }}>修改数据</button>
    </div>
  );
}

---

如果有多个状态有方法：

1. 声明对象类型的状态
2. 多次声明

代码依次如下：

function App(props) {
//1.声明对象类型的状态
  let [val, setVal] = useState({
    vala:0,
    valb:1,
    valc:2
  })
   return (
     <div className="App">
       {/* 第一种 */}
       {val.vala}------{val.valb}----------{val.valc}
     </div>
   );
 }

// 2.多次声明 (推荐使用，如果有多个)
function App(props) {
	let [vala, setVala] = useState(0)
	let [valb, setValb] = useState(1)
	let [valc, setValc] = useState(2)
	return (
     	<div className="App">
			{/* 第二种 */}
 			使用数据{vala}------{valb}----------{valc}
     	</div>
   	);
 }

新手上路，有错误欢迎指正