useState

使无状态组件可以使用 state 功能

上代码(简单计数器)

// 导入
import React, { useState, Fragment } from "react";

function Count() {
  // 定义 (类似 state )
  const [count, setCount] = useState(0);

  return (
    <Fragment>
      // 使用
      <p>count : {count}</p>
      <button onClick={() => setCount(count + 1)}>add</button>
    </Fragment>
  );
}

export default Count;

useEffect

类似生命周期函数功能

上代码(简单计时器)

// 导入
import React, { useState, Fragment, useEffect } from "react";

function TimeCount() {
  // 定义 state
  const [isOn, setIsOn] = useState(false);
  const [count, setCount] = useState(0);

  // 开关
  let taggleIsOn = () => {
    setIsOn(!isOn);
  };
  
  // 设置计时
  useEffect(() => {
    let interval;
    if (isOn) {
      interval = setInterval(() => {
        setCount(count => count + 1);
      }, 1000);
    }
    
    // 清楚定时器
    return () => clearInterval(interval);
  }, [isOn]);

  return (
    <Fragment>
      <p>{count}</p>
      {isOn && <button onClick={taggleIsOn}>关</button>}
      {!isOn && <button onClick={taggleIsOn}>开</button>}
    </Fragment>
  );
}

export default TimeCount;

useContext

无状态组件使用 context 上下文

1.定义 Context 组件

import React from "react";

let Context = React.createContext();

export default Context;

2.创建生产者Provider

import React, { useState } from "react";

import Context from "./Context";

function Provider(props) {
  const [count, setCount] = useState(15);

  let context = {
    count: count,
    change: newCount => {
      setCount(count + newCount);
    }
  };

  return <Context.Provider value={context}>{props.children}</Context.Provider>;
}

export default Provider;

3.使用( 消费者 )

import React, { Fragment, useContext } from "react";

import Context from "./Context";

function Inner() {
  const { count, change } = useContext(Context);
  return (
    <Fragment>
      <p>{count}</p>
      <button onClick={() => change(15)}>change</button>
    </Fragment>
  );
}

export default Inner;