Class 组件到功能组件

Question

如何将此 class 组件转换为功能组件？ 我想要实现的是使用 useEffect() 订阅和取消订阅 firebase

 class PostsProvider extends Component { state = { posts: [] } unsubscribeFromFirestore = null; componentDidMount = () => { this.unsubscribeFromFirestore = firestore.collection('posts').onSnapshot(snapshot => { const posts = snapshot.docs.map(collectIdAndDocs); this.setState({ posts }); }); } componentWillUnmount = () => { this.unsubscribeFromFirestore(); }

Answer 1

这就是我转换组件的方式。 您将使用 useState() 创建您的帖子 state 然后使用 useEffect 非常容易移动。 您要确保的主要事情是您的依赖数组对其正确，因此它不会经常订阅和取消订阅（或不够频繁）。

function PostsProvider(){
    const [posts,setPosts] = useState([]);
    useEffect(() => {
        const unsubscribeFromFirestore = firestore
        .collection('posts')
        .onSnapshot(snapshot => {
        const posts = snapshot.docs.map(collectIdAndDocs);
        setPosts(posts);
        });
        return () => {
            unsubscribeFromFirestore();
        }
    }, [])
}