react入门2｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

hook 语法

前请说明

这一节我不会着力于应该各种细节，而是用类比的方法去写，用 vue 或 js 原生语法去考虑。

正文

第一个例子——麻雀虽小五脏俱全

import React, { useState } from "react";
//1.useState是state的核心函数
export default function App() {
  let [count, setCount] = useState(0);
  //2.返回值和参数有比较重要
  useEffect(() => {
    document.title = "yuxinyue";
  });
  //3.副作用
  return (
    //4.return的ui有点意思
    <div className="App">
      <h1>Hello CodeSandbox{count}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button
        onClick={() => {
          //5.大括号的语法
          setCount(count++);
        }}
      >
        count++
      </button>
    </div>
  );
}

这是第一个函数式组件的例子，这个例子我把要点总结成 5 个但是我只能解决前四个，首先我们说明一下 hook

hook 是指需要挂在到生命周期的函数，useState 与 useEffect 均为 hook。

下面我们一条条说明：

0. useState 用于创建一个 state
1. 该函数参数为初始值返回值为一个数组，第一个数组是 state 本身，第二个是 set 函数。而 state 本身的作用类似于 get 函数。

let [count, setCount] = useState(0);

3. 该函数需要一个函数作为参数（还有一个数字是可选的不在这里说明），在初次渲染和每次更新渲染时都会调用。这个函数里写会影响组件之外的东西，比如 http 申请。

useEffect(() => {
  document.title = "yuxinyue";
});

4. return()里的东西相当于``语法，直接写 html 即可。

再一个例子——父子组件关系

import { useState, useEffect } from "react";
//1.子组件
const Sub = (props) => (
  <div>
    <div> {props.title}</div>
    <div> {props.doc}</div>
  </div>
);
//()只能有一个标签
export default function App() {
  let [count, setCount] = useState(0);
  useEffect(() => {
    document.title = "yuxinyue";
  });
​
  return (
    <div className="App">
      <Sub title={"于新越"} doc={"学习react"}></Sub>
      //2.传值方式
      <h1>Hello CodeSandbox{count}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button
        onClick={() => {
          setCount(count++);
        }}
      >
        count++
      </button>
    </div>
  );
}

这个我们注意这样几点：

• 子组件只要满足我们的规范就行
• react 的传值类似于 vue 的方式但是没有这么多规范