![image](/uploads/images/ReactJS-1024x538.jpeg)
Tìm hiểu react hook useState Ngày trước dùng Class thì viết như này Còn bây giờ thì chỉ cần viết ngắn gọn như này useEffect giúp chúng ta xử lý các side effects, useEffect sẽ tương đương với các
Tìm hiểu react hook
- useState
Ngày trước dùng Class thì viết như này
constructor(props) {
super(props);
this.state = { isLoading: false }
}
onClick() {
this.setState({
isLoading: true,
})
}
Còn bây giờ thì chỉ cần viết ngắn gọn như này
const [isLoading, setLoading] = useState(false);
const onClick = ()=> {
setLoading(true)
}
- useEffect
giúp chúng ta xử lý các side effects, useEffect sẽ tương đương với các hàm componentDidMount, componentDidUpdate và componentWillUnMount trong LifeCycle. Ví dụ:
import { callApi } from './actions'
const App = ({ callApi, data }) => {
useEffect(() => {
callApi('some_payload_')
return () => {
// almost same as componentWillUnmount
console.log('unmount!');
};
}, [])
return(
<div>
{data.map(item => {// do something })}
</div>
)
}
const mapDispatchToProps = dispatch => ({
callApi: (keyword) => dispatch(callApi)
})
export default connect({}, mapDispatchToProps)(App)
- useMemo
useMemo giúp ta kiểm soát việc được render dư thừa của các component con, nó khá giống với hàm shouldComponentUpdate trong LifeCycle. Bằng cách truyền vào 1 tham số thứ 2 thì chỉ khi tham số này thay đổi thì thằng useMemo mới được thực thi
const UsingMemo = ({ products }) => {
const soldoutProducts = useMemo(
() => products.filter(x => x.isSoldout === true), // / soldoutProducts sẽ chỉ thực thi khi props products thay đổi
[products] // watch products
);
};
- useCallback
useCallback có nhiệm vụ tương tự như useMemo nhưng khác ở chỗ function truyền vào useMemo bắt buộc phải ở trong quá trình render trong khi đối với useCallback đó lại là function callback của 1 event nào đó như là onClick chẳng hạn.
- useContext
cái này được sử dụng làm store của project. trươc đây mình hay dùng redux thunk, redux sagas giờ mình có thể dùng context để sử dụng
download source code tại đây