React 的函数写法与类写法的区别

我们将通过React应用程序中常见的bug说明其差异。

import React from 'react'
class MailOrder extends React.Component {
    state = {
        user: 'Dan',
    };
    render() {
        return (
            <div>
                <label>
                    <b>Choose profile to view: </b>
                    <select
                        value={this.state.user}
                        onChange={e => this.setState({ user: e.target.value })}
                    >
                        <option value="Dan">Dan</option>
                        <option value="Sophie">Sophie</option>
                        <option value="Sunil">Sunil</option>
                    </select>
                </label>
                <h1>Welcome to {this.state.user}’s profile!</h1>
                <p>
                    <ProfilePageFunction user={this.state.user} />
                    <b> (function)</b>
                </p>
                <p>
                    <ProfilePageClass user={this.state.user} />
                    <b> (class)</b>
                </p>
                <p>
                    Can you spot the difference in the behavior?
                </p>
            </div>
        )
    }
}

export default MailOrder;

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

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

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

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

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

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

操作步骤：

使用两个按钮尝试此操作序列：

1. 点击 其中一个"follow"按钮
2. 在3秒之前 更改 所选的个人资料(笔：就是那个下拉框)。
3. 查看 弹出的文字。

你会注意到一个特殊的区别：

• 使用上面的ProfilePage 函数 ，单击Follow Dan的个人资料，然后导航到Sophie's仍然会弹框'Followed Dan'。
• 使用上面的ProfilePage 类 ，他将会弹出'Followed Sophie'：
  结果输出：
  1331779-f691c773d522a27b.gif

在此示例中，第一个行为是正确的行为。如果我follow一个人然后导航到另一个人的个人资料， 类的实现显然是错误的。

那么如果我们不采用函数的方法编写组件，要怎么样才能达到相同的效果呢？
我们尝试在定时器延迟之前把之前的prop传过去，修改类代码为：

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

    handleClick = () => {
        var { user } = this.props
        setTimeout(this.showMessage.bind(this,user), 3000);
    };

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

这个方法对于这个功能而言是可行的，但是不能解决根本问题，如果showMessage方法里面调用了this.prop或者this.state对象的属性值怎么办？

为了防止某个变量被外部修改，我们通常使用闭包来解决，所以我们尝试当组件结束某个特定渲染中的props或状态，则它们始终保持完全相同，就是在render中定义函数行为，如下：

class ProfilePageClass extends React.Component {
    render() {
        // Capture the props!
        const props = this.props;
        // Note: we are *inside render*.
        // These aren't class methods.
        const showMessage = () => {
          alert('Followed ' + props.user);
        };

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

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

这样，它内部的任何代码（包括showMessage）都可以保证看到这个特定渲染的props。React不再“移动我们的props”了。然后我们可以在里面添加任意数量的辅助函数，它们都会使用捕获的props和状态。 闭包来救场了!

从上面的例子中我们可以看出，如果在render中定义函数而不是使用类方法，那么拥有一个类有什么意义呢？实际上，我们可以通过删除它周围的类“外壳”来简化代码:

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

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

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

才发现原来遇见了以前的自己，是不是很惊喜。这下应该能明白函数和类的区别了吧！

当然，针对函数的写法，React18+推出了React-hook，可以让我们在函数中管理状态，如下代码：

function ProfilePageFunction(props) {
    const [message, setMessage] = useState('');
    const showMessage = () => {
        alert('You said: ' + message);
    };
    const handleSendClick = () => {
        setTimeout(showMessage, 3000);
    };
    const handleMessageChange = (e) => {
        setMessage(e.target.value);
    };
    return (
        <>
            <input value={message} onChange={handleMessageChange} />
            <button onClick={handleSendClick}>Send</button>
        </>
    );
}

本人暂时还没有学完hook，如有需要请查看react-hook的官网：https://reactjs.org/docs/hooks-intro.html

参考博客：https://www.jianshu.com/p/26926857ff73