将组件分类为功能组件

Question

如何将此类组件转换为功能组件？我试图实现的是使用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

这就是我转换组件的方式。你可以使用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();
}
}, [])
}