stonexer / yab

🐈 A fetch library
4 stars 0 forks source link

RFC: React hook useData #8

Open stonexer opened 5 years ago

stonexer commented 5 years ago

RFC 1: Hook return Component API [Deprecated]

Example

function MoviePage({ id }) {
  const queryMovie = useCallback(() => api.queryMovie({ params: { id } }), [id]);

  const [DataBoundary] = useData(queryMovie, { polling: 100 });

  return (
    <DataBoundary>
      {(movieData, loading) => <MovieDetail data={movieData} />}
    </DataBoundary>
  );
}

https://www.reddit.com/r/reactjs/comments/9yq1l8/how_do_you_feel_about_a_hook_returning_components/

因为使用 <DataBoundary> 的写法,会导致 OldDataBoundary !== NewDataBoundary 从而引发重新渲染的问题,该方法被 放弃

stonexer commented 5 years ago

RFC 2:

https://github.com/facebook/react/issues/16037

function MoviePage({ id }) {
  const queryMovie = useCallback(() => api.queryMovie({ params: { id } }), [id]);

  const [dataBoundary] = useData(queryMovie, { polling: 100 });

  return (
    <div>
      {dataBoundary((movieData, { loading }) => <MovieDetail data={movieData} />)}
    </div>
  );
}
stonexer commented 5 years ago

RFC 3:

something like Fetch component api