React函数式组件与类组件的不同你知道吗

区别

其他区别

ProfilePageClass.js

import React from 'react';

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

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

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

export default ProfilePageClass;

ProfilePageFunction.js

import React from 'react';

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

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

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


export default ProfilePageFunction;

Home.js

import React from "react";

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

class Home extends React.Component {
  state = {
      user: 'Dan',
  };
  render() {
      return (
          <>
              <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>
          </>
      )
  }
}

export default Home;

页面展示：

进行如下操作发现问题：(初始用户为Dan)

1.点击其中的Follow按钮

2.3s内切换选中的账号

3.查看弹出的文本。

点击函数组件的Follow：

点击类组件的Follow：

点击件的Follow按钮时，执行handleClick()，3s后显示用户的姓名。

函数组件：若你在点击Follow按钮3s内切换用户，3s后调用的函数输出的用户仍未之前的用户姓名。

类组件：若你在点击Follow按钮3s内切换用户，3s后调用的函数输出的用户为改变之后的用户姓名。

此时类组件就有一个问题：我之前的handleClick()执行的是A用户的操作，但操作还没执行，切换用户后，直接调用执行了B用户的相同操作。

此案例中，当父组件的state改变时，子组件进行重新渲染，子组件的props改变；

类组件：

• 改变props(Dan-Sophie)，类组件也改变了值，永远保持一致。
• 原因：类组件捕获最新的值（永远保持一致）当实例的props属性发生修改时，class组件直接使用this（组件的实例），所以可以直接获取组件最新的props。

函数组件：函数式组件捕获了渲染所用的值。

• 当我改变props时（Dan->Sophie），你会发现函数组件会渲染之前的值Dan这个名字。
• 原因：函数式组件捕获了渲染所使用的值。在函数组件中，之前的props参数，已经因为javascript闭包的特性，保存在内存之中，无法从外部进行修改(维护多个人的状态)。所以在定时器执行callback时，打印的还是旧值。

使用Hooks，同样的原则也适用于state。看这个例子：

MessageThread.js

import {useState} from 'react';

function MessageThread() {
  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>
      </>
  );
}

export default MessageThread;

说明了同样的观点：如果我发送一条特定的消息，组件不应该对实际发送的是哪条消息感到困惑。这个函数组件的message变量捕获了“属于”返回了被浏览器调用的单击处理函数的那一次渲染。

所以当我点击“发送”时message被设置为那一刻在input中输入的内容。

在函数式组件中，你也可以拥有一个在所有的组件渲染帧中共享的可变变量,它被成为“ref”。ref可以随时读取当前值。
需要自己手动管理。

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function MessageThread() {
  const [message, setMessage] = useState('');

  // Keep track of the latest value.
  const latestMessage = useRef('');
  useEffect(() => {
      latestMessage.current = message;
  });
  

  const showMessage = () => {
      alert('You said: ' + latestMessage.current);
  };

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

  const handleMessageChange = (e) => {
      setMessage(e.target.value);
  };

  return (
      <>
          <input value={message} onChange={handleMessageChange} />
          <button onClick={handleSendClick}>Send</button>
      </>
  );
}

export default MessageThread;

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程宝库的更多内容!

 一、Axios是什么Axios是一个基于promise的HTTP库（类似于jQuery的Ajax，用于HTTP请求）可以用于浏览器和node.js（既可以用于客户端也可以用于node.js编写的服 ...