react基础---组件02

import React, { useState } from "react";

export default function HookTest() {
  // useState(initState)
  const [count, setCount] = useState(0);
  // 多个状态
  const age = useAge();
  const [fruit, setFruit] = useState("banana");
  const [input, setInput] = useState("");
  const [fruits, setFruits] = useState(["apple", "banana"]);

  return (
    <div>
      <p>点击了{count}次</p>
      <button onClick={() => setCount(count + 1)}>点击</button>

      <p>年龄：{age ? age : ‘loading...‘}</p>
      <p>选择的水果：{fruit}</p>
      <p>
        <input
          type="text"
          value={input}
          onChange={e => setInput(e.target.value)}
        />
        <button onClick={() => setFruits([...fruits, input])}>新增水果</button>
      </p>
      <ul>
        {fruits.map(f => (
          <li key={f} onClick={() => setFruit(f)}>
            {f}
          </li>
        ))}
      </ul>
    </div>
  );
}

import React, { useState, useEffect } from "react";

export default function HookTest() {
  // useState(initState)
  const [count, setCount] = useState(0);

  // 副作用钩子会在每次渲染时都执行，每次count修改才会执行
  useEffect(() => {
    document.title = `您点击了${count}次`;
  }, [count]);

  //   如果仅打算执行一次，传递第二个参数为[]
  //   componentDidMount
  useEffect(() => {
    // api调用
    console.log("api调用");
  }, []);

  return (
    <div>
      <p>点击了{count}次</p>
      <button onClick={() => setCount(count + 1)}>点击</button>
    </div>
  );
}

import React, { useState, useEffect } from "react";

// 自定义hook是一个函数，名称用“use"开头，函数内部可以调用其他钩子
function useAge() {
  const [age, setAge] = useState(0);
  useEffect(() => {
    setTimeout(() => {
      setAge(20);
    }, 2000);
  });
  return age;
}

export default function HookTest() {
  // const [age] = useState("0");
  const age = useAge();

  return (
    <div>
      <p>年龄：{age ? age : ‘loading...‘}</p>
    </div>
  );
}

import React, { useContext } from "react";

// 1.创建上下文
const MyContext = React.createContext();
const { Provider, Consumer } = MyContext;

function Child(prop) {
  return <div>Child: {prop.foo}</div>;
}
// 2.使用hook消费
function Child2() {
  const context = useContext(MyContext);
  return <div>Child2: {context.foo}</div>;
}
// 3. 使用class指定静态contextType
class Child3 extends React.Component {
    // 设置静态属性通知编译器获取上下文中数据并赋值给this.context
    static contextType = MyContext;
    render() {
        return <div>Child3: {this.context.foo}</div>
    }
}
export default function ContextTest() {
  return (
    <div>
      <Provider value={{ foo: "bar" }}>
        {/* 消费方法1：Consumer */}
        <Consumer>{value => <Child {...value} />}</Consumer>
        {/* 消费方法2：hook */}
        <Child2 />
        {/* 消费方法3：contextType */}
        <Child3 />
      </Provider>
    </div>
  );
}