如何将 React 函数式组件转换为类组件

Question

I've been trying to convert below code to class components but the results i get is not same. please help. Especially when i need to convert useMemo. In this case, i don't know what the function of useMemo please someone can tell me. What i know is useMemo is a Hook. And hook can't be used in class components. so how can i convert it? All i need is to convert all the below code into react class components.

import React, { useState, useMemo } from "react";
import "./styles.css";
const initialQuestions = [
  {
    id: 1,
    questionText: "What is the capital of France or Ireland?",
    questionType: "checkbox",
    answerOptions: [
      { answerText: "New York", isCorrect: false, checked: false },
      { answerText: "London", isCorrect: false, checked: false },
      { answerText: "Paris", isCorrect: true, checked: false },
      { answerText: "Dublin", isCorrect: true, checked: false }
    ]
  },
  {
    id: 2,
    questionText: "Who is CEO of Tesla or Amazon?",
    questionType: "select",
    answerOptions: [
      { answerText: "Jeff Bezos", isCorrect: true, checked: false },
      { answerText: "Elon Musk", isCorrect: true, checked: false },
      { answerText: "Bill Gates", isCorrect: false, checked: false },
      { answerText: "Tony Stark", isCorrect: false, checked: false }
    ]
  },
  {
    id: 3,
    questionText: "The iPhone was created by which company?",
    questionType: "select",
    answerOptions: [
      { answerText: "Apple", isCorrect: true, checked: false },
      { answerText: "Intel", isCorrect: false, checked: false },
      { answerText: "Amazon", isCorrect: false, checked: false },
      { answerText: "Microsoft", isCorrect: false, checked: false }
    ]
  }
];

const App = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [showScore, setShowScore] = useState(false);
  const [questions, setQuestions] = useState(initialQuestions);

  const handleAnswerOptionClick = (e, questionId) => {
    const answerTextValue = e.target.value;
    const updatedQuestions = questions.map((question) => {
      if (question.id === questionId) {
        const updatedAnswersOptions = question.answerOptions.map((answer) => {
          if (answer.answerText === answerTextValue) {
            return { ...answer, checked: !answer.checked };
          } else {
            return question.questionType === "select"
              ? { ...answer, checked: false }
              : answer;
          }
        });
        return { ...question, answerOptions: updatedAnswersOptions };
      } else {
        return question;
      }
    });
    setQuestions(updatedQuestions);
  };

  const score = useMemo(() => {
    return questions.reduce((acc, q) => {
      const correctAnswerSelected = q.answerOptions.reduce((acc, answer) => {
        if (answer.checked && answer.isCorrect) {
          acc = acc + 1;
        }
        return acc;
      }, 0);
      acc = acc + correctAnswerSelected;

      return acc;
    }, 0);
  }, [questions]);

  const handleNext = () => {
    const nextQuestion = currentQuestion + 1;
    if (nextQuestion < questions.length) {
      setCurrentQuestion(nextQuestion);
    } else {
      setShowScore(true);
    }
  };

  return (
    <div className="App">
      {showScore ? (
        <div>
          You scored {score} out of {questions.length}
        </div>
      ) : (
        <main className="question">
          {score}
          <div>
            <div>
              <h2>{questions[currentQuestion].questionText}</h2>
            </div>
          </div>
          <div className="question__options">
            {questions[currentQuestion].questionType === "select" &&
              questions[currentQuestion].answerOptions.map(
                (answerOption, i) => (
                  <React.Fragment key={answerOption.answerText}>
                    <input
                      type="radio"
                      name="radio-group"
                      value={answerOption.answerText}
                      checked={answerOption.checked}
                      onChange={(e) =>
                        handleAnswerOptionClick(
                          e,
                          questions[currentQuestion].id
                        )
                      }
                    />
                    <label htmlFor={i}>{answerOption.answerText}</label>
                  </React.Fragment>
                )
              )}
            {questions[currentQuestion].questionType === "checkbox" &&
              questions[currentQuestion].answerOptions.map(
                (answerOption, i) => (
                  <div key={answerOption.answerText}>
                    <input
                      className="option"
                      type="checkbox"
                      id={i}
                      value={answerOption.answerText}
                      onClick={(e) =>
                        handleAnswerOptionClick(
                          e,
                          questions[currentQuestion].id
                        )
                      }
                    />
                    <label htmlFor={i}>{answerOption.answerText}</label>
                  </div>
                )
              )}

            <div className="question__submit">
              <button onClick={handleNext}>Next</button>
            </div>
          </div>
        </main>
      )}
    </div>
  );
};

export default App;

Answer 1

useMemo is a hook that is used to memoize a component or function. That means that given the same input the output will be the same, since react knows that it will be the same given the same inputs it no longer has to re-render or re-calculate the function. To move it over to a classical component you just need to move the internal function over the question.reduce(...). The main issue with doing this is it could slow down your application depending on how big the calculations are.