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>
  );
}

如果有多个状态有方法：

声明对象类型的状态
多次声明

代码依次如下：

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>
   	);
 }

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