我学错了 ReactJs 吗？

Question

今天看到关于“哑组件和智能组件”的讨论后，我意识到我只使用哑组件？

就像我制作的这个迷你 youtube 克隆应用程序一样，它是为了学习和娱乐而制作的。我开始对 React 感到越来越舒服，现在在我看到那个讨论之后，我不知道我是否正在学习它正确的方式

应用组件

import React, { useState } from "react";
import NavBar from "./NavBar";
import Content from "./Content";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import SingleVideo from "./SingleVideo";
import requests from "./requests";

const App = () => {
  const [text, setText] = useState("");
  const [toggle, setToggle] = useState(true);

  const inputHandler = (e) => {
    e.preventDefault();
    console.log(text);
  };

  return (
    <section className="main">
      <Router>
        <nav className="navbar">
          <Link to="/">
            <div className="logo">
              <i
                class="bars fas fa-bars"
                onClick={() => setToggle(!toggle)}
              ></i>
              <i className="youtube fab fa-youtube"></i>
              <h1>Youtube</h1>
            </div>
          </Link>
          <form onClick={inputHandler}>
            <input
              className="input"
              placeholder="Search"
              type="text"
              value={text}
              onChange={(e) => setText(e.target.value)}
            />
            <button type="submit" className="btn">
              <i className="fas fa-search"></i>
            </button>
          </form>
          <img src="" alt="" />
        </nav>
        <Switch>
          <div className="side-by-side">
            <NavBar toggle={toggle} />
            <Route exact path="/">
              <Content fetchURL={requests.fetchHome} />
            </Route>
            <Route path="/trending">
              <Content fetchURL={requests.fetchTrending} />
            </Route>
            <Route path="/subscriptions">
              <Content title="Subscriptions" />
            </Route>
            <Route path="/player/:videoId/:title">
              <SingleVideo />
            </Route>
          </div>
        </Switch>
      </Router>
    </section>
  );
};

export default App;

内容组件

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

const Content = ({ fetchURL }) => {
  const [video, setVideo] = useState([]);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get(fetchURL);
        setVideo(response.data.items);
        console.log(video);
      } catch (error) {
        console.log(error);
      }
    }
    fetchData();
  }, [fetchURL]);

  return (
    <section className="main-content">
      {video.map((vid) => {
        return (
          <Link to={`/player/${vid.id.videoId}/${vid.snippet.title}`}>
            <div className="video" key={vid.etag}>
              <img src={vid.snippet.thumbnails.high.url} alt="" />

              <div className="info">
                <div className="channel">
                  <img src="" alt="" />
                </div>
                <div className="title">
                  {vid.snippet.title}
                  <p className="channel-name">{vid.snippet.channelTitle}</p>
                </div>
              </div>
            </div>
          </Link>
        );
      })}
    </section>
  );
};

export default Content;

单视频组件

import React from "react";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";

const SingleVideo = () => {
  const { videoId, title } = useParams();
  console.log(videoId);

  return (
    <section className="single-video">
      <div className="player">
        <iframe
          width="1300"
          height="700"
          frameBorder="0"
          allowFullScreen
          src={`https://www.youtube.com/embed/${videoId}`}
        ></iframe>
        <h1>{title}</h1>
      </div>
    </section>
  );
};

export default SingleVideo;

Answer 1

您并没有使用所有愚蠢的组件。多年来，React 发生了一些变化，旧的文档可能会对现在的工作方式产生误导性的理解。哑组件是没有可修改状态的组件，它将完全基于反应属性呈现。过去，在使用带有 react 的函数组件时，由于缺乏处理状态的方法，它们都是愚蠢的。在较新版本的 React 中，他们引入了 useState 钩子，允许函数组件具有状态，这意味着仅仅因为它是一个函数组件并不意味着它是愚蠢的。喜欢或讨厌新的 hooks api，它只是做同样事情的不同机制，并且具有所有相同的优点和缺点。

在测试方面，哑组件的优点非常明显。您的测试可以像定义属性然后检查输出一样简单。