React hook vs class

react-hooks 介绍

没啥可介绍的,react-hooks 介绍

react class component

以前的生命周期写法

写发就是

export default class Demo extends React.Component {
 construct(props) {
  	super(props);
  	this.state = {
  		// ...
  	}
  }
  componentWillReceiveProps(nextProps) {
  }
  componentDidMount() {
  }
  componentWillUnmount() {
  }
  // ...... 其他生命周期函数
  render() {
  	return (
  		<div>
  			// 实现的页面 html jsx 格式
  		</div>
  	)
  }
}

hooks 的感受

刚开始学hooks 的时候感觉和这个class(DOM 的优化就不说了)的没什么差，可当敲打键盘做对比的时候， 感觉hooks 是对页面逻辑的结构化抽取。

示例

画一个页面，实现的效果有3点
1. 查询好友列表
2. 查询选中好友状态
3. 发送信息给选中的在线好友

React class Component 模式

import React, {Component} from 'react'

// 好友列表数据
const friends = [{id: "1", name: "Logan1",}, {id: "2", name: "Logan2",}, {id: "3", name: "Logan3",}, {id: "4", name: "Logan4",}, {id: "5", name: "Logan5",}, {id: "6", name: "Logan6",}]

export default class FriendList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      friendList: [],
      friendId:null,
      isOnline: false,
      message: "",
    }
  }

  componentDidMount() {
    this.fetchFriendList()
  }

  // 获取好友列表
  fetchFriendList = () => {
    console.log("异步去取好友列表");
    this.setState({friendList: friends})

  }

  // 获取好友状态
  fetchFriendStatus = (friendId) => {
    this.setState({isOnline: friendId%2==0?"online":"offline"})

  }

  // 发送好友消息
  sendMessage = () => {
    const {friendId, message} = this.state;
    alert(`me send friendId[${friendId}]->${message}`)
  }

  // 改变选中好友
  onChangeFriend = (friendId) => {
    this.fetchFriendStatus(friendId);
    this.setState({friendId});
    this.setState({message: ""})
  };

  // 改变发送消息
  onChangeMessage = (message) => {
    this.setState({message});
  }


  render() {
    return (
      <div>
        <select value={this.state.friendId} onChange={e => this.onChangeFriend(e.target.value)}>
          {
            this.state.friendList.map(({id, name}) =>
              <option key={id}value={id}>{name}</option>
            )
          }
        </select>
        <div>{this.state.friendId}:{this.state.isOnline}</div>
        {
          this.state.isOnline === "online" && <><textarea rows={3} value={this.state.message}
                                               onChange={(e) => this.onChangeMessage(e.target.value)}></textarea><br/></>
        }

        {
          this.state.isOnline === "online" && <button onClick={this.sendMessage}>send</button>
        }
      </div>
    )
  }

};

写出来的效果就是在一个页面中实现花页面， 以及一些操作数据改变的方法
fetchFriendList 获取好友列表
fetchFriendStatus 获取好友状态
sendMessage 发送好友消息
onChangeFriend 改变选中好友
onChangeMessage 改变发送消息

然后在来看看hook 模式

React hooks 模式

./FriendList.js

import React, {useState, useEffect} from 'react'
import useFriendList from './hooks/useFriendList'
import useFriendStatus from './hooks/useFriendStatus'
import useMessage from './hooks/useMessage'

export default function FriendList() {
  const friendList = useFriendList();           // 好友列表
  const [friendId, setFriendId] = useState(null);  // 选中好友
  const isOnline = useFriendStatus(friendId);   // 好友在线状态
  const [message, {sendMessage, changeMessage}] = useMessage(friendId, ""); // 发送消息


  return <div>
    <select value={friendId} onChange={e => setFriendId(e.target.value)}>
      {
        friendList.map(({id, name}) => <option key={id}
                                               value={id}>{name}</option>)
      }
    </select>
    <div>{friendId}:{isOnline}</div>
    {
      isOnline === "online" && <><textarea rows={3} value={message}
                                           onChange={(e) => changeMessage(e.target.value)}></textarea><br/></>
    }

    {
      isOnline === "online" && <button onClick={() => {
        sendMessage()
      }}>send</button>
    }
  </div>

}

./hooks/useFriendList.js

import {useState, useEffect} from "react"

const friends = [{id: "1", name: "Logan1",}, {id: "2", name: "Logan2",}, {id: "3", name: "Logan3",}, {id: "4", name: "Logan4",}, {id: "5", name: "Logan5",}, {id: "6", name: "Logan6",}]

export default function useFriendList() {
  const [friendList, setFriendList] = useState([]);
  
  useEffect(()=> {
    console.log("异步去取好友列表")
    setFriendList(friends);
    return () => {
      setFriendList([]);
    }
  },[]);

  return friendList;
}

./hooks/useFriendStatus.js

import {useState, useEffect} from 'react'
export default function useFriendStatus(friendId) {
  const [status, setStatus] = useState(null)

  useEffect(()=>{
    console.log();
    if(friendId) {
      setStatus(friendId%2==0?"online":"offline");
    }
    return ()=> {
      setStatus(null);
    }
  })

  return status
}

./hooks/useMessage.js

import {useState, useEffect} from "react"

export default function useMessage(friendId, initMessage) {
  const [message, setMessage] = useState(initMessage);

  useEffect(()=> setMessage(""),[friendId]);

  const sendMessage = () => {
    alert(`me send friendId[${friendId}]->${message}`)
  };

  const changeMessage = (msg) => {
    setMessage(msg)
  };

  return [message, {
    sendMessage,
    changeMessage,
  }];
}

在页面上来看 就是 返回 jsx 格式的 页面
至于逻辑的处理 可以封装在各自的 hook 中
如
useFriendList hook 当dom第一次渲染完的时候,去获取好友列表
const [friendId, setFriendId] = useState(null) 好友ID 和设置好友id
useFriendStatus 好友状态， 当friendId 改变的时候，会去请求获取当前friendId 对应的状态
const [message, {sendMessage, changeMessage}] = useMessage(friendId, "") 当消息改变的时候会去更新消息 以及发送消息的方法。

总结

hook vs class

hook在页面上看就是

1. 数据
2. 页面
3. api(没有具体的实现，具体的实现在) 界面清晰
4. 当其他页面需要好友列表时， 可以直接使用该hook

而class在页面上看就是

1. 数据
2. 页面
3. 实现(具体的实现是写在页面上的)
4. 当其他页面需要好友列表时, 需要复制的是页面中的对应的state 和 具体的实现方法，很不友好，(不好共享)

新的东西出来了， 有好处， 可以使用， 旧的可以不修改。 在后面的系统中开始使用…