[2021-02-24更新]​React Hook使用要点

import React,{ useState } from'react';
function Example(){
// 声明一个叫 “count” 的 state 变量。
const [count, setCount]=useState(0);
return(
<div>
<p>You clicked {count} times</p>
<buttononClick={()=>setCount(count +1)}> Click me</button>
</div>
);}

import React,{ useState, useEffect } from'react';
function Example(){
const [count, setCount] = useState(0);
    useEffect(()=>{
// 组件渲染完毕之后，使用浏览器的 API 更新页面标题 
// 相当于 componentDidMount 和 componentDidUpdate:   
document.title =`You clicked ${count} times`;
const token = setInterval(function(){ alert("Hello"); }, 3000);
return ()=>{
// 清理附加到生命周期的行为，相当于 omponentWillUnmount
            clearInterval(token);
        }
    });
return(<div>
<p>You clicked {count} times</p>
<buttononClick={()=>setCount(count +1)}> Click me </button>
</div>);}

import React, { useState, useEffect } from 'react';
// 一个自定义个Hook，用于侦听好友是否在线和取消侦听，在其他组件中，通过传入friendID既可以复用这里的行为
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
  useEffect(() => {
// 启动侦听
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
// 取消侦听
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });
return isOnline;
}

// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');
class App extends React.Component {
  render() {
// 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
// 无论多深，任何组件都能读取这个值。
// 在这个例子中，我们将 “dark” 作为当前的值传递下去。
return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {
return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
// 指定 contextType 读取当前的 theme context。
// React 会往上找到最近的 theme Provider，然后使用它的值。
// 在这个例子中，当前的 theme 值为 “dark”。
static contextType = ThemeContext;
  render() {
return <Button theme={this.context} />;
  }
}

// 计数器案例的 Reducer Hook改写方案
const initialState = {count: 0};

function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
  }
}

function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
      Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
  );
}

function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}