【学习打卡】第4天 React Hooks学习

课程名称：RN入门到进阶，打造高质量上线App(2022全新升级)

课程章节：2-10 React Native Hooks开发指南

主讲老师：CrazyCodeBoy

课程内容：今天学习的主要内容包括：react hooks入门，学习编写react hooks组件。

课程收获：

1. 学会编写React Hooks组件

上次学习了用class来写组件，这次主要用的是React Hooks

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

先定义一个简单的函数式组件：

const Test1 = () => {
    return (
        <button>你好</button>
    )
}

export default Test1;

这个组件本身是没有状态的，当我们点击button后需要修改button的值。

如果按照之前class的写法，是需要父组件传递一个props下来，才能操作的

我们先修改组件的代码，让它接受一个text和一个修改text的方法

type IProps = {
    text?: string
    textChange: () => void;
}

const Test1: React.FC<IProps> = ({ text = "你好", textChange }) => {
    return (
        <button onClick={textChange}>{text}</button>
    )
}

export default Test1;

再去父组件传递参数和方法下来。

<Test1 text={this.state.text} textChange={() => this.setState({ text: "你好" + new Date().getTime() })} />

这样的话，每次点击按钮，组件显示的内容都会变化

如果我们不需要父组件来控制呢？

比如，按钮自己的参数校验，只有符合条件的数据，才调用父组件的方法。

这个时候，就需要使用到组件内自己的状态了。

示例代码：

import { useState } from "react";

type IProps = {
    submit: (v: string) => void;
}

const Test1: React.FC<IProps> = ({ submit }) => {

    const [text, setText] = useState("");

    const buttonClick = () => {
        if (text.length === 0) {
            alert("参数不能为空");
        } else {
            submit(text);
        }
    }

    return (
        <>
            <input value={text} onChange={e => setText(e.target.value)} />
            <button onClick={buttonClick}>提交</button>
        </>
    )
}

export default Test1;

在这个组件里面 ，我将input输入的内容用组件内的状态text进行了保存，当点击提交按钮的时候，如果text没有值，也就是用户没有进行输入的话，就会有提示信息。当用户输入了东西之后，就调用父组件的submit方法进行提交。

Hook 使用规则
Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

1. 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
2. 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）

今天学习课程加练习一共用了30分钟，学习了React Hooks的简单写法，然后想了下自己会怎么用它。我觉得hook是一个超级方便的语法，明天会学习其他的hook方法。