Hooks

useState基本使用
import { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(10)
  const [name, setName] = useState('wxq')
  const [books, setBook] = useState([
    { id: 1, name: '大鱼海棠' },
    { id: 2, name: '福尔摩斯' },
    { id: 3, name: '墨菲定律' }
  ])
  const [person, setPerson] = useState({ name: 'Rose', age: 18 });
  const [jsx, setJsx] = useState(<h2>我是引入的JSX</h2>);
  console.log('=======');
  const changeName = (e, newNames) => {
    // console.log(e);
    setName(newNames)
  }
  const changeBooks = () => {
    setBook([...books, { id: 4, name: '微表情' }])
  }
  const changePerson = () => {
    setPerson({ ...person, age: 22 })
  }
  const changeJsx = () => {
    setJsx(<h1>我是新的JSX</h1>);
  };
  return (
    <div>
      <h1>{count}</h1>
      <div>{(() => { console.log('render') })()}</div>
      <button onClick={() => setCount(20)}>+1</button>
      <h1>{name}</h1>
      <button onClick={(e) => changeName(e, 'zy')}>name</button>
      {books.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
      <button onClick={changeBooks}>Books</button>
      <h1>{person.name},{person.age}</h1>
      <button onClick={changePerson}>Rose</button>
      {jsx}
      <button onClick={changeJsx}>Jsx</button>

    </div>
  )
}

useEffect副作用
import { useEffect, useState } from "react"

export const UseEffect = () => {
  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      {count > 3 ? null : <Child />}
      <hr />
      <h1>{number}</h1>
      <button onClick={() => setNumber(number + 1)}>+1</button>
    </div>
  )
}
const Child = () => {
  useEffect(() => {
    console.log('Effect');
    const handleResize = () => console.log('resize');
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])
  return (
    <div>
      <h1>子</h1>
    </div>
  )
}
跨组件传值
App.js
import { Component, useContext } from 'react';
import './App.css';

// 创建 Context
// const ThemeContext = createContext();

// 导入 ThemeContext
import { ThemeContext } from './ThemeContext';

const Node = () => (
  <div className="node">
    Node
    <SubNode />
  </div>
);
const SubNode = () => (
  <div className="sub-node">
    SubNode
    <Child />
  </div>
);
// 消费数据
const Child = () => {
  const value = useContext(ThemeContext);

  return (
    <div className="child">
      <h1>{value}</h1>
      <h1>Child</h1>
      <ThemeContext.Consumer>{(value) => value}</ThemeContext.Consumer>
      <button onClick={() => console.log(value)}>按钮</button>
    </div>
  );
};

export class App extends Component {
  render() {
    return (
      <ThemeContext.Provider value={'pink'}>
        <div className="app">
          <h1>我是App组件</h1>
          <Node />
        </div>
      </ThemeContext.Provider>
    );
  }
}

ThemeContext .js
import { createContext } from 'react';

// 创建 Context
export const ThemeContext = createContext();

ref使用
import { useRef } from "react";
export const Ref = () => {
  const inputRef = useRef(null)

  const handleSubmit = () => {
    console.log(inputRef.current.value);
    inputRef.current.focus()
  }
  return (
    <div>
      <input type={'text'} ref={inputRef}></input>
      <button onClick={handleSubmit}>提交</button>
    </div>
  )
}