React Hooks

2019-01-14 本文已影响0人我也不知道啊丶

在React16.7.0.alpha版本之前，React里的函数组件是不能有自己的状态的，如果要有自己的状态，必须使用class组件。
React16.7.0.alpha版本新增了Hooks来解决这个问题。

State Hooks

看个例子

function App() {
  return (
    <div>
      <div>{count}</div>
      <button onClick={add}>+1</button>
    </div>
  );
}

如果要实现上面代码的功能，必须要有一个count变量，所以要么得在App外面声明count，要么就得把App变成class组件。
现在有了Hooks，就可以在function里有自己的状态了。
要使用Hooks，前提是React必须是16.7.0-alpha版本以上，然后先引入它

import { useState } from 'react';

然后在function里

function App() {
  const [count/*值*/,setCount/*更新函数*/] = useState(0);
  const add = () => {
    setCount(count + 1)
  }
  return (
    <div>
      <div>{count}</div>
      <button onClick={add}>+1</button>
    </div>
  );
}

useState可以用在更复杂的地方

function App() {
  const [count,setCount] = useState(0/*初始值*/);
  const [user, setUser] = useState({
     name: 'jack',
     age: 18 ,
     hobby:['lol','cat','code']
  }/*初始值*/)
  const add = () => {
    setCount(count+1)
  }
  const old = () =>{
    setUser({
      ...user, //此处表示拷贝user的所有属性
      age: user.age + 1
    })
  }
  const addHobby = () => {
    let newHobby = Math.random();
    setUser({
      ...user,
      hobby:[...user.hobby,newHobby]
    })
  }
  return (
    <div>
      <div>{count}</div>
      <button onClick={add}>+1</button>
      <div>{user.name},{user.age}<br/>{user.hobby.join(',')}</div>
      <button onClick={old}>+1</button>
      <button onClick={addHobby}>增加爱好</button>
    </div>
  );
}

const [count,setCount] = useState(0/*初始值*/);只能写在function里

useEffect Hooks

首先来了解一下什么是副作用(Side Effect):

副作用(Side Effect)是指函数或者表达式的行为依赖于外部世界

是不是有点看不懂。。。还是举例说明吧

f1是没有作用的函数，f2函数依赖了外部的console.log，当外部修改了console.log，f2就会发生变化，这样的函数就是有副作用的函数，而f3，无论修改什么它的返回值都是a+b，所以把这样的函数称为纯函数。
useEffect的作用就是把有副作用的东西写在这个里面
还是来看代码

<body>
    <div id="box" style="border:1px solid red"></div>
    <div id="root"></div>
  </body>

import React from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from 'react';

import "./styles.css";

function App() {
  const [count,setCount] = useState(0/*初始值*/);
  useEffect(() => {
    document.querySelector('#box').innerHTML = count;
  });
  const add = () => {
    setCount(count+1)
  }
  
  return (
    <div>
      <div>{count}</div>
      <button onClick={add}>+1</button>
    </div>
  );
}

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

可以看到，对于React来说，id为box的div是未知的，它对于App来说是有副作用的，所以放在useEffect里

React Hooks

State Hooks

useEffect Hooks

猜你喜欢

热点阅读