什么是Hook?
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.
State Hook
官方代码实例:
import React, { useState } from "react";
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
代码详解:
- 在Example这个组件里面,我们call useState这个Hook来声明一个状态变量(state variable)。状态变量命名为count。useState函数里面传入count的初始值0。
- 当用户点击Click me这个button的时候,就触发setCount函数,将count的值加一。然后React会重新渲染(re-render)Example这个组件,重新渲染的时候会使用新的count值。 官方的例子很简单,也方便新手学习和理解。个人觉得,这个里面有一个重点是,触发setCount后,React会重新渲染Example这个组件。下面看一个我在Youtube上面看到的例子。
在Props里面放入函数(function)
例子大概是说,建立一个博客主页(Home),主页上显示创建的博客列表(BlogList)。两个组件的具体代码如下,首先是Home组件:
import { useState } from "react";
import BlogList from "./BlogList";
const Home = () => {
const [blogs, setBlogs] = useState([
{
title: "My new website",
body: "lorem ipsum...",
author: "mario",
id: 1,
},
{
title: "Welcome party!",
body: "lorem ipsum...",
author: "yoshi",
id: 2,
},
{
title: "Web dev top tips",
body: "lorem ipsum...",
author: "mario",
id: 3,
},
]);
const handleDelete = (id) => {
const newBlogs = blogs.filter((blog) => blog.id !== id);
setBlogs(newBlogs);
};
return (
<div className="home">
<BlogList
blogs={blogs}
title="All Blogs"
handleDelete={handleDelete}
/>
</div>
);
};
export default Home;
然后是一个BlogList组件:
const BlogList = ({ blogs, title, handleDelete }) => {
return (
<div className="blog-list">
<h2>{title}</h2>
{blogs.map((blog) => (
<div className="blog-preview" key={blog.id}>
<h2>{blog.title}</h2>
<p>Written by {blog.author}</p>
<button onClick={() => handleDelete(blog.id)}>
delete blog
</button>
</div>
))}
</div>
);
};
export default BlogList;
先分析Home组件
- 在Home组件里面,作者创建了一个叫blogs的状态变量(state variable)和相应的setBlogs函数。blogs的初始值就是useState传入的参数。
- React在渲染Home组件的时候,会call BlogList这个组件,同时把props对象传过去。这里传过去的props对象其实就是:
{ blogs: {blogs}, title: "All Blogs", handleDelete: {handleDelete} }
再分析BlogList组件
- 当用户点击delete blog按钮的时候,就会触发handleDelete这个函数,这个函数是从Home组件传过去的。函数参数为blog.id,函数被触发之后,会继续触发setBlogs来改变blogs的值,因为状态改变(state variable改变了),所以Home组件会重新渲染。
- 当Home组件重新渲染的时候,也会重新渲染BlogList组件,因为blogs的值已经改变,所以BlogList组件的内容也随之发生改变。也就是说,点击delete blog,重新渲染之后,该博客就被删除了。