0
点赞
收藏
分享

微信扫一扫

React入门 8:React Hooks API

所以使用 Hooks 时要注意一下 React 的版本哦。

Basic Hooks

1. CodeSandBox的使用

使用 CodeSandBox 可以在线创建 React 应用。

小技巧:

  • 创建了 React 应用后,需修改版本号时可直接在 package.json 里修改,并保存,就会自动加载了。
  • 命令行面板上 输入 npm info react versions 可查询 React 版本。

2. useState 的使用

首先要引入 useState:

import {useState} from "react"

useState 的使用:

const [state, setState] = useState(initialState);

其中,state表示state的值;setState表示更新 state 的函数;useState返回一个数组,数组的第一项表示state的值;initialState表示 state 的初始值。

示例代码:

function App() {
  
  const [count, setCount] = useState(0)

  const add = ()=>{
    setCount(count + 1)
  }

  const minus = ()=>{
    setCount(count - 1)
  }

  return (
    <div className="App">
      <div>
        <span className="value">{count}</span>
      </div>
      <button onClick={add}>加1</button>
      <button onClick={minus}>减1</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

原本函数组件是没有状态的,但自从有了 Hooks,函数组件可以有状态了。

3. useState的更多例子

function App() {
  const [user, setUser] = useState({
    name: "janice",
    age: 18,
    hobbies: ["reading", "game", "coding", "basketball"]
  });

  const addHobbies = () => {
    let newHobbies = Math.random();
    setUser({
      ...user,
      hobbies: [...user.hobbies, newHobbies]
    });
  };

  const delHobbies = () => {
    user.hobbies.splice(1, 1);
    setUser({
      ...user,
      hobbies: user.hobbies
    });
  };

  return (
    <div className="App">
      <div>
        {user.name} , {user.age}
      </div>
      <div>{user.hobbies.join(" , ")}</div>
      <button onClick={addHobbies}>增加爱好</button>
      <button onClick={delHobbies}>删除爱好</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

4. useEffect的使用

使用 useEffect 处理副作用,下面举例说明一下什么是副作用:

function f1() {}       // f1是没作用的函数

function f2() {         // f2是有副作用的函数
    console.log(1)
}

function f3(a, b) {   // f3是纯函数,又称没有副作用的函数
    return a + b
}
  • 在 函数 f2 中,依赖了 console.log(1), 依赖的东西可能会被修改,有可能会产生意外的结果。
    依赖了不知从哪来的东西的函数就是有副作用的函数。
  • 函数 f3 是纯函数,又称没有副作用的函数,即不依赖外部不知从哪来的东西。
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  //把有副作用的函数放在useEffect里
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
举报

相关推荐

0 条评论