Hook的基本概念
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hook的中 useState 使用
import React, { useState } from 'react';
function Example() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);
//也可以这样使用
const [coordinates, setCoordinates] = useState({x:0,y:0});
return (
<div>
<p>You clicked {count} times,{coordinates.x}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Hook的中 useEffect 使用
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 类似于componentDidMount和componentDidUpdate
// count 中的值每次变化都会重新进行渲染
useEffect(() => {
//使用浏览器API更新文档标题
document.title = `You clicked ${count} times`;
});
// 或者 只在数据加载时渲染,更新时不渲染,[]中可以放参数如:[count]每当count值变化useEffect执行。
useEffect(() => {
//使用浏览器API更新文档标题
document.title = `You clicked ${count} times`;
},[]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
如果引用Hook组件时名称必须是use开头