react-hook useState,creactContext,useContext，useEffect 使用

const [text, setText] = useState(0);
初始化text=0；setText是唯一能够改变text值的方法，类似state与setState的关系。

涉及到组件传值，在父组件使用export const TextContext = createContext();
在return时，

<div>
            <div>
                <Search placeholder="Todo Info" enterButton="提交" onSearch={value => getValue(value)} />
                <div>{text}</div>
                <TextContext.Provider value={text}>
                <Test />
                </TextContext.Provider>
            </div>
   </div>

使用TextContext.Provider包裹需要传值的子组件，所传的值为value。

在子组件中，import { TextContext } from './useStateexp';先引入TextContext；
然后再函数中使用 const text = useContext(TextContext);引入父组件所传入的变量

const Test = () => {
    const text = useContext(TextContext);
    return (
        <div>
           .......
        </div>
    );
};

在改变值的时候，值为数组，需要用...运算符进行赋值。

const [text, setText] = useState(Array);
    const getValue = value => {
        setText([...text, value]);
    };

踩坑，在用useState操作数组时，一定要用...进行数组操作，不然页面不会更新。

const UseStateexp = () => {
    const [text, setText] = useState(Array);

    const getValue = value => {
        setText([...text, value]);
    };

    const deleteTodo = value => {
        setText([...value]);
    };
  }

每次 render 之后都会执行 useEffect，如果想要useEffect只执行一次，需要useEffect(()=>{},[]),useEffect第二个参数传入一个空数组，可以使其只执行一次。

一个函数中可以包含多个 useEffect 如：

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
  // ...
}