React 16.9
나는 이것을 알고있다 class component state
:
class JustAnotherCounter extends Component {
state = {
count: 0
};
Hooks 를 사용하는 것과 같습니다 useState
.
function JustAnotherCounter() {
const [count, setCount] = useState(0);
.. 그러나 Hooks를 사용하는 아래 의 클래스 구성 요소 상태 와 동등한 것은 무엇 입니까? : useState
class Main extends Component {
state = {
step: 1,
firstName: '',
lastName: '',
jobTitle: '',
jobCompany: '',
jobLocation: '',
}
어떤 도움이라도 대단히 감사하겠습니다.
클래스 구성 요소에서와 동일한 일반적인 아이디어를 사용할 수 있습니다. 개체를 직접 확산해야한다는 점을 명심하십시오.
const [state, setState] = useState({
step: 1,
firstName: '',
lastName: '',
jobTitle: '',
jobCompany: '',
jobLocation: '',
});
// Setting state like:
setState(prev=>{...prev,firstName:'Joey'});
여러 세트 상태 호출을 설정할 수도 있습니다.
const [step,setStep] = useState(1);
const [firstName,setFirstName] = useState('');
const [lastName,setLastName] = useState('');
const [jobTitle,setJobTitle] = useState('');
const [jobCompany,setJobCompany] = useState('');
const [jobLocation,setJobLocation] = useState('');
또 다른 옵션은 감속기를 사용하는 것입니다. 이것은 다음보다 훨씬 더 복잡한 예제로 만들 수 있습니다.
const [state, dispatch] = useReducer(
(state, action) => ({ ...state, [action.name]: action.value }),
{
step: 1,
firstName: '',
lastName: '',
jobTitle: '',
jobCompany: '',
jobLocation: '',
}
);
// Then update values using:
dispatch({ name: 'firstName', value: 'Joey' });
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다