react 中的 function Component

因为hooks的出现 解决了函数式 组件没有生命周期的一个痛点 同时也有一些新的坑等待我们

遇到的第一个坑就在配置了react-hot-loader的情况下无法使用hoosk原因是react-hot-loader的那个babel插件的问题 可能在解析某些语法上做了特殊的处理

class Component 和 function Component 的区别

为什么要了解 Function 写法的组件呢？因为它正在变得越来越重要。
那么 React 中 Function Component 与 Class Component 有何不同？

Capture props (props 的捕获)

对比下面两段代码。

class Component

import React from 'react';

class ProfilePage extends React.Component {
   
  showMessage = () => {
   
    alert('Followed ' + this.props.user);
  };

  handleClick = () => {
   
    setTimeout(this.showMessage, 3000);
  };

  render() {
   
    return <button onClick={
    this.handleClick }>Follow</button>;
  }
}

export default ProfilePage;

function Component

import React from 'react';

function ProfilePage(props) {
   
  const showMessage = () => {
   
    alert('Followed ' + props.user);
  };

  const handleClick = () => {
   
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={
    handleClick }>Follow</button>
  );
}

export default ProfilePage;

这两个组件都描述了同一个逻辑：点击按钮 3 秒后 alert 父级传入的用户名。

父级组件代码

import React from "react";
import ReactDOM from "react-dom";

import ProfilePageFunction from './ProfilePageFunction';
import ProfilePageClass from './ProfilePageClass';

class App extends React.Component{
   

  state