因为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