组合 React 组件以实现可重用性答案

【问题标题】：Composing React Components for Reusability组合 React 组件以实现可重用性
【发布时间】：2022-10-23 12:31:10
【问题描述】：

我正在开发一个 ReactJS 应用程序来显示电影并按升序和降序对它们进行排序。我有 App.js 组件，它从 API 加载电影，然后将电影发送到 MovieList 组件。

function App() {

  const [movies, setMovies] = useState([])

  useEffect(() => {
    fetchMovies() 
  }, [])

  const fetchMovies = async () => {
    let response = await fetch('SOMEURLTOMOVIES')
    let result = await response.json() 
    setMovies(result.Search)
  }

  const handleSort = () => {
    let sortedMovies = movies.sort((a, b) => {
      return b.Title - a.Title 
    })

    console.log(sortedMovies)
  }

  return (
    <div className="App">
      <button onClick = {handleSort}>Sort</button>
        <MovieList movies = {movies} />
    </div>
  );
}

export default App;

MovieList 组件如下所示：

function MovieList(props) {

  const movieItems = props.movies.map((movie) => {
    return <li key = {movie.imdbID}>{movie.Title}</li>
  })

  return (
    <div>
      {movieItems}
    </div>
  )

}

电影显示正确。首先要注意的是 fetchMovies 就在组件内部。我在大多数 React 应用程序中都看到了这种模式。如果他们想从其他地方执行 fetchMovies 怎么办。我猜开发人员会将其移至单独的函数等。

App.js 函数的另一件事是排序函数（目前不工作）。只有 App 组件可以对电影进行排序。如果其他一些组件也对电影排序感兴趣怎么办？我们将如何做到这一点？

【问题讨论】：

那么你想避免螺旋钻之类的吗？也许看看 React 上下文，看看它是否满足你的需求？如果没有你想要做什么的具体例子，很难回答......
我想我的问题更多是关于人们如何在 React 中实现排序，以便排序功能可以在其他组件中重用。
但是，如何重用？你想让组件修改App的状态吗？给自己的电影排序？您希望如何重复使用它？
这个问题太宽泛而无法回答，并且有资源，React 的新旧大纲设计模式。最近有工作进入patterns.dev。
我看到了两个选项，您可以将此获取逻辑移动到自定义钩子中，并在其需要的应用程序部分重用它。如果您只想获取一次并在整个应用程序中重复使用数据，您可能希望将数据放入上下文 API。

标签： reactjs

【解决方案1】：

首先，这取决于目标。如果你试图让电影只获取一次并且所有组件都使用来自该获取的数据，那么你将使用 React Context。但是，当您只需要代码重用而不需要共享状态时，不应将上下文用作越狱卡。

通常，出于代码重用目的，您会将此逻辑放在a custom hook 中。

const useMovies = () => {
  const [movies, setMovies] = useState([])

  useEffect(() => {
    fetchMovies() 
  }, [])

  const fetchMovies = async () => {
    let response = await fetch('SOMEURLTOMOVIES')
    let result = await response.json() 
    setMovies(result.Search)
  }

  const sort = () => {
    let sortedMovies = movies.sort((a, b) => {
      return b.Title - a.Title 
    })

    return 
  }

  return { movies, sort } 
}

【讨论】：