ReactHooks的深入理解与使用

import { useState } from 'react';

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

let _useState = useState(0);
let count = _useState[0];
let setCount = _useState[1];

You clicked {count} times

  setCount(count + 1)}>
  Click me
 

function add(n) {
  const result = 0;
  return result + 1;
}

add(1); //1
add(1); //1

function ExampleWithManyStates() {
 const [age, setAge] = useState(42);
 const [fruit, setFruit] = useState('banana');
 const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

 //第一次渲染
 useState(42); //将age初始化为42
 useState('banana'); //将fruit初始化为banana
 useState([{ text: 'Learn Hooks' }]); //...

 //第二次渲染
 useState(42); //读取状态变量age的值（这时候传的参数42直接被忽略）
 useState('banana'); //读取状态变量fruit的值（这时候传的参数banana直接被忽略）
 useState([{ text: 'Learn Hooks' }]); //...

let showFruit = true;
function ExampleWithManyStates() {
 const [age, setAge] = useState(42);
 
 if(showFruit) {
  const [fruit, setFruit] = useState('banana');
  showFruit = false;
 }
 
 const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

 //第一次渲染
 useState(42); //将age初始化为42
 useState('banana'); //将fruit初始化为banana
 useState([{ text: 'Learn Hooks' }]); //...

 //第二次渲染
 useState(42); //读取状态变量age的值（这时候传的参数42直接被忽略）
 // useState('banana'); 
 useState([{ text: 'Learn Hooks' }]); //读取到的却是状态变量fruit的值，导致报错

import { useState, useEffect } from 'react';

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

 // 类似于componentDidMount 和 componentDidUpdate:
 useEffect(() => {
  // 更新文档的标题
  document.title = `You clicked ${count} times`;
 });

 return (
  

   
You clicked {count} times
    setCount(count + 1)}>
    Click me
   
  
 );
}

class Example extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   count: 0
  };
 }

 componentDidMount() {
  document.title = `You clicked ${this.state.count} times`;
 }

 componentDidUpdate() {
  document.title = `You clicked ${this.state.count} times`;
 }

 render() {
  return (
   

    
You clicked {this.state.count} times
     this.setState({ count: this.state.count + 1 })}>
     Click me
    
   
  );
 }
}

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

 useEffect(() => {
  document.title = `You clicked ${count} times`;
 });

import { useState, useEffect } from 'react';

function FriendStatus(props) {
 const [isOnline, setIsOnline] = useState(null);

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

 useEffect(() => {
  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  // 一定注意下这个顺序：告诉react在下次重新渲染组件之后，同时是下次调用ChatAPI.subscribeToFriendStatus之前执行cleanup
  return function cleanup() {
   ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
 });

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

 componentDidMount() {
  ChatAPI.subscribeToFriendStatus(
   this.props.friend.id,
   this.handleStatusChange
  );
 }

 componentWillUnmount() {
  ChatAPI.unsubscribeFromFriendStatus(
   this.props.friend.id,
   this.handleStatusChange
  );
 }

 componentDidUpdate(prevProps) {
  // 先把上一个friend.id解绑
  ChatAPI.unsubscribeFromFriendStatus(
   prevProps.friend.id,
   this.handleStatusChange
  );
  // 再重新注册新但friend.id
  ChatAPI.subscribeToFriendStatus(
   this.props.friend.id,
   this.handleStatusChange
  );
 }

useEffect(() => {
 document.title = `You clicked ${count} times`;
}, [count]); // 只有当count的值发生变化时，才会重新执行`document.title`这一句

import { 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 (
  

   {props.friend.name}
  
 );
}