React Hooks 与 Vue Function based API - junruchen/junruchen.github.io GitHub Wiki

import React from 'react';

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

  render () {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({count: this.state.count + 1)}}>Click me</button>
       </div>
    )
  }
}

import React, { useState } from 'react';

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

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

import React from 'react';

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isOnline: null
    }
  }

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

  componentDidUpdate(prevProps) {
    // 当 friend.id 变化时进行更新
    if (prevProps.friend.id !== this.props.friend.id) {
      // 取消订阅之前的 friend.id
      ChatAPI.unsubscribeFromFriendStatus(
        prevProps.friend.id,
        this.handleStatusChange
      );
      // 订阅新的 friend.id
      ChatAPI.subscribeToFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
      );
    }
  }

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

  handleStatusChange = (state) => {
    this.setState({
      isOnline: status.isOnline
    });
  }

  render () {
    return (
      <div>
        {this.state.isOnline === null ? 'Loading...' :
          (this.state.isOnline ? 'Online' : 'Offline')
        }
      </div>
    )
  }
}

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

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

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

  return (
    <div>
      {isOnline === null ? 'Loading...' :
        (isOnline ? 'Online' : 'Offline')
      }
    </div>
  )
}

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

function useOnline(id) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange (state) {
      setIsOnline(status.isOnline)
    }
    ChatAPI.subscribeToFriendStatus(id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(id, handleStatusChange);
    };
  }, [id]);

  return isOnline;
}

// 使用 自定义Hook
function Example(props) {
  const isOnline = useOnline(props.friend.id);
  
  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

import React from 'react';
import PropTypes from 'prop-types';
class VisibilityHelper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisplayed: props.initialState || false,
    };
  }
  hide = () => {
    this.setState({
      isDisplayed: false,
    });
  }
  show = () => {
    this.setState({
      isDisplayed: true,
    });
  }
  render() {
    return this.props.children({
      ...this.state,
      hide: this.hide,
      show: this.show,
    });
  }
}
VisibilityHelper.propTypes = {
  initialState: PropTypes.bool,
  children: PropTypes.func.isRequired,
};
export default VisibilityHelper;

import React from 'react';
import VisibilityHelper from 'VisibilityHelper';

function ButtonComponent() {
  return (
    <VisibilityHelper initialState={true}>
      {
        ({
          isDisplayed,
          hide,
          show
        }) => (
            <div>
              {
                isDisplayed ?
                  <button onClick={hide}>Click to hide</button>
                  :
                  <button onClick={show}>Click to display</button>
              }
            </div>
          )
      }
    </VisibilityHelper>
  );
}

import React from 'react';
function VisibilityHelper(WrappedComponent, initialState = false) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isDisplayed: initialState
      };
    }

    hide = () => {
      this.setState({
        isDisplayed: false,
      });
    }
    show = () => {
      this.setState({
        isDisplayed: true,
      });
    }

    render() {
      return <WrappedComponent
        isDisplayed={this.state.isDisplayed}
        show={() => this.show()}
        hide={() => this.hide()}
        {...this.props} />;
    }
  };
}
// 定义 按钮组件
let ButtonComponent = ({ isDisplayed, hide, show }) => {
  return (
    <div>
      {
        isDisplayed ?
          <button onClick={hide}>Click to hide</button>
          :
          <button onClick={show}>Click to display</button>
      }
    </div>
  );
}

// 使用高阶组件，并设定默认值
ButtonComponent = VisibilityHelper(ButtonComponent, true);
export default ButtonComponent

import React, { useState } from 'react';
function ButtonComponent() {
  const [isDisplayed, show] = useState(false)
  return (
    <div>
      {
        isDisplayed ?
          <button onClick={() => show(false)}>Click to hide</button>
          :
          <button onClick={() => show(true)}>Click to display</button>
      }
    </div>
  )
}

import { value, computed, watch, onMounted } from 'vue'

const App = {
  template: `
    <div>
      <span>count is {{ count }}</span>
      <span>plusOne is {{ plusOne }}</span>
      <button @click="increment">count++</button>
    </div>
  `,
  setup() {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}