简介 :
原本函数组件和类组件同为react组件,但是由于函数组件为无状态组件,react hook 的引入,让函数组件有了他的状态,可以通过 react hook 增加相应状态。
hook的使用规则
Hook 就是 JavaScript 函数,但是使用它们会有两个额外的规则:
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。(还有一个地方可以调用 Hook —— 就是自定义的 Hook 中,我们稍后会学习到。)
自定义hook
- 当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中。而组件和 Hook 都是函数,所以也同样适用这种方式。
- 自定义 Hook 是一个函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook。
hook 的规则
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。(还有一个地方可以调用 Hook —— 就是自定义的 Hook 中。)
- 自定义hook时它的名字应该始终以 use 开头,这样可以一眼看出其符合 Hook 使用规则。
hook API
- 基础Hook
- useState
- useEffect
- useContext
实现一个高阶组件
const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<Route {...rest} render={(props) => {
if (fakeAuth.isAuthenticated) {
return <Component {...props} />
} else {
return <Redirect to={{
pathname: '/login',
state: props.match.url
}}></Redirect>
}
}}></Route>
)
}
useState 的基本写法
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
可定义多个state
function ExampleWithManyStates() {
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}
useEffect 的基本写法
useEffect 也叫做函数副作用, 他替代了一些 React 生命周期函数,componentDidMount, componentDidUpdate, componentWillUnmount;
return 出去的就是解绑副作用,比如解除页面定时器等防止内存泄漏的方法;
他的第二个参数数个数组,作用是只要数组内的值变化了,才会执行解绑动作,如果数组为空,则会在页面销毁时去最后执行。
useEffect(()=>{
handlefatch()
return () => {...code}
}, [] )
handlefatch = () => {
console.log("我是a")
}
网友评论