React入门笔记 - Hooks

172 阅读2分钟

什么是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,重新渲染之后,该博客就被删除了。