首先演示第一个hook:
State Hook
下面用两种写法表现同样的计数器
传统:
import React from 'react'
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
}
}
//添加数字并刷新
add(){
let {count} = this.state
this.setState({
count:count+1
})
}
render() {
return <div onClick={()=>this.add()}>
{this.state.count}
</div>
}
}
Hook:(方括号中的时候第一个参数就是自定义的state元素,可以通过第二个自定义方法来刷新这个state)
import React,{useState} from 'react'
const Main = () =>{
//方括号中第一个参数就是自定义的state元素,可以通过第二个自定义方法来刷新这个state
const [count,setCount] =useState(0)
function add() {
setCount(count+1)//刷新count值
}
return (
<div onClick={()=>add()}>{count}</div>
)
}
export default Main
这两个写法可以显示一个同样的计数器效果,但是可以明显感觉出来hook写出来的更简洁,更明晰。
组件函数的写法有两种:
function Main(props) {
return <div />;
}
或者箭头函数
const Main= (props) => {
return <div />;
}
当然,如果我们想要使用多个state 变量,它允许我们给不同的 state 变量取不同的名称:
// 声明多个 state 变量
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
Effect Hook
import React, { useState, useEffect } from 'react';
接下来我们在前面使用hook写的计数器的基础上把useEffect放进去
import React,{useState,useEffect} from 'react'
function Main(){
//方括号中第一个参数就是自定义的state元素,可以通过第二个自定义方法来刷新这个state
const [count,setCount] =useState(0)
useEffect(() => {
console.log(count)
});
//添加
function add() {
setCount(count+1)//刷新count值
}
return (
<div onClick={()=>add()}>{count}</div>
)
}
export default Main
这样就可以大家不难发现useEffect 会在每次渲染后都执行
这种情况就可以这样清除
useEffect(() => {
//使用需要结束后清除的方法
/*...*/
return function cleanup() {
//在这里清除
/*...*/
};
});
Hook规则: