https://zh-hans.reactjs.org/docs/hooks-overview.html react官方文档

react hook主要分为state hook和effect hook.

1 state hook

   和class组件里面的this.state类似,都是存储数据的地方,而且可以附上初始值.而且他同时提供了操作数据的行为.如下图,从官网上抄来的:

   

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这里我有一个疑问,如果一个页面初始化的数据很多,那么岂不是要写很多userState,先放着,以后再解决

ps:  淦,官网有解决方法,就是放个对象,但是不推荐使用

https://zh-hans.reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

 

2 effect hook

   官网说的也挺清楚地 ,  我们用了函数组件,那么一些生命周期函数就使用不了了,他是componentDidMount,componentDidUpdate,componentWillUnmounted的集合,代码如下:

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

function Example() {
  const [count, setCount] = useState(0);

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

3 自定义hook

  在我看来,这更是hook对函数式编程的体现,很像写一个共有的函数逻辑,给多个组件使用,只是在里面使用了useEffect和UserState.看代码

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

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;
}

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

4 hook使用规则

  在最外层调用,不要再条件判断或者函数里面使用.