useState란 무엇이며, 왜 일반let을 사용하지 않습니까?
소개하다.
현재, 우리는useState 갈고리를 사용하여React 구성 요소에 변수를 설정하고 있습니다.useState는 "hooks"라고 불리는데, 이렇게 쓰여 있습니다.
const [count, setCount] = React.useState<number>(0);
But what really is this? Why do we have to use this hook just to set a variable that holds a number and get incremented?
우리는 왜 이런 물건을 쓰지 않습니까?
let count = 0;
count++;
TLDR；
React는 구성 요소 함수를 호출하여 다시 렌더링하며, 함수를 호출할 때마다 변수가 재설정됩니다.
한 걸음 뒤로 물러서다
React 핵심 개념에 들어가기 전에 바닐라 자바스크립트로 돌아가자.이 프레젠테이션에 대해 우리는 간단한 계수기 프로그램을 구축할 것이다.
let count = 0;
function add() {
count++;
document.getElementById('count').textContent = count;
}
add() 감청기를 누르는 단추로 터치할 때, 우리는 계수를 추가하고 문서에 접근해서 텍스트를 업데이트합니다.만약 우리가 자세히 관찰한다면, 우리는 그것이 세 가지 동작을 하고 있는 것을 볼 수 있을 것이다.우리들은 그것을 자신의 기능으로 분해할 것이다.
// Declare
let count = 0;
function mutate() {
count++;
}
function render() {
document.getElementById("count").textContent = count;
}
// event listener pseudocode
when button is clicked:
mutate()
render()
비디오 Alt:
mutate()와render() 실행됩니다.3 행동
우리가 계속하기 전에 우리는 다음과 같은 세 가지 동작이 있는데, 우리는 앞에서 분해할 것이다.
신고하다→ let
변이하다→ 계수 변수 변경
룬델→ 화면 변경 사항 업데이트
<h1>Counter</h1>
<p id="count">0</p>
<button onclick="mutate()">Mutate</button>
<button onclick="render()">Render</button>
<script>
let count = 0;
function mutate() {
count++;
logTime();
console.log('clicking, count: ', count);
}
function render() {
document.getElementById('count').textContent = count;
}
</script>
비디오 Alt:
리액션 보면서.
JavaScript 코드를 단도직입적으로 번역하는 것이 바로 우리가 지금 가지고 있는 것입니다.
function Component() {
let count = 0;
function mutate() {
count = count + 1;
console.log(count);
}
return (
<div>
<h1>{count}</h1>
<button onClick={mutate}>Mutate</button>
</div>
);
}
찾았어요?
예, 렌더링 기능이 없습니다.
물론, 우리는 접근
document을 통해 같은 렌더링 기능을 사용할 수 있지만, React에서 수동으로 접근하는 것은 좋은 방법이 아니다. 우리가 React를 사용하는 목적은 수동으로 관리하는 것이 아니다.렌더링 기능
What is the equivalent of render function in React then?
그것은 실제로
function Component() 자체다.화면을 업데이트하려고 할 때마다
Component() 함수를 호출해서 화면을 업데이트합니다.이 함수를 호출하면 다시
count 선언하고 다시 mutate 함수를 선언하며 마지막으로 새로운 JSX를 반환합니다.다음은 프레젠테이션입니다.
비디오 설명:
무엇이 렌더링 기능을 촉발시켰습니까?
let on React 실행 코드를 사용하는 경우 변경 사항이 없습니다.렌더링 함수가 호출되지 않았기 때문입니다.
React에서 렌더링 기능을 트리거합니다.
이 때,useState 값이 바뀔 때마다 렌더링 함수를 호출합니다. 이 함수 자체가 구성 요소 함수입니다.
아날로그 렌더링 기능
count 변수를 상태로 바꾸기 전에 setToggle을 사용한 렌더링 함수 시뮬레이션을 만들고 싶습니다.현재 우리는 render를 사용하여 다시 렌더링을 터치할 수 있다.function Component() {
//#region //*=========== Render Fn Simulation ===========
const [toggle, setToggle] = React.useState<boolean>(false);
function render() {
setToggle((t) => !t);
}
//#endregion //*======== Render Fn Simulation ===========
let count = 0;
const mutate = () => {
count = count + 1;
console.log(`${getTime()}| count: ${count}`);
};
return (
<div>
<h1>{count}</h1>
<Button onClick={mutate}>Mutate</Button>
<Button onClick={render}>Render</Button>
</div>
);
}
비디오 Alt:
🤯 왜 소용이 없어요?
이것은 사실상 우리가 카운트 변수를 다시 성명하고 있기 때문이다.
function Component() {
//#region //*=========== Render Fn Simulation ===========
const [toggle, setToggle] = React.useState<boolean>(false);
function render() {
setToggle((t) => !t);
console.log(`${getTime()} | Render function called at count: ${count}`);
}
//#endregion //*======== Render Fn Simulation ===========
let count = 0;
const mutate = () => {
count = count + 1;
console.log(`${getTime()}| count: ${count}`);
};
return (
<div>
<h1>{count}</h1>
<Button onClick={mutate}>Mutate</Button>
<Button onClick={render}>Render</Button>
</div>
);
}
Now that is why we can't use a normal variable in a React component.
어셈블리 외부에서 선언
너도 물어볼 수 있다.
Why don't we move the declaration outside the Component function?
이것은 일리가 있다. 이동 성명을 통해 우리는
count가 0으로 재성명되는 것을 피했다.한번 해보자.let count = 0;
function Component() {
//#region //*=========== Render Fn Simulation ===========
const [toggle, setToggle] = React.useState<boolean>(false);
function render() {
setToggle((t) => !t);
console.log(`${getTime()} | Render function called at count: ${count}`);
}
//#endregion //*======== Render Fn Simulation ===========
const mutate = () => {
count = count + 1;
console.log(`${getTime()}| count: ${count}`);
};
return (
<div>
<h1>{count}</h1>
<Button onClick={mutate}>Mutate</Button>
<Button onClick={render}>Render</Button>
</div>
);
}
비디오 Alt:
count가 3그것은 확실히 작용했다. 이것은 요행이 아니다.보셔야 할 게 있습니다.
비디오 Alt:
이것은 좋은 행동이 아니다. 왜냐하면 우리는 수동으로 그것을 정리해야 하기 때문이다. 그렇지 않으면 우리의 응용 프로그램을 어지럽힐 수 있기 때문이다.
Now that is why we can't use a normal variable outside a React component.
useState 사용
이것은 우리가useState를 사용할 때의 코드입니다
function Component() {
const [count, setCount] = React.useState<number>(0);
const mutateAndRender = () => {
setCount((count) => count + 1);
console.log(`${getTime()} | count: ${count}`);
};
return (
<div>
<h1>{count}</h1>
<div className='mt-4 space-x-2'>
<Button onClick={mutateAndRender} variant='light'>
Add
</Button>
</div>
</div>
);
}
비디오 Alt:
콘솔을 알 수 있습니다.로그 수가 1 지연되어 잠시 무시되었습니다.
선언, 다음 구문을 사용하여 선언
const [count, setCount] = React.useState<number>(0);
setCount를 사용하여 변종 및 렌더링, 값 변경 및 자동 렌더링 변경다시 렌더링할 때마다 데이터 유지→ render 함수를 호출할 때useState는 계수 값을 다시 설명하지 않습니다.
다른 페이지로 이동할 때, 또는 보통 호출합니다. 구성 요소가 마운트 해제될 때, 이 값을 초기화합니다.
왜 백작이 늦었어
const mutateAndRender = () => {
setCount((count) => count + 1);
console.log(`${getTime()} | count: ${count}`);
};
setCount 함수가 비동기적이기 때문이다.함수를 호출한 후 계수 값을 업데이트하는 데 시간이 필요합니다.그래서 우리가 컨트롤러를 호출할 때지금 로그인하면 이전 값을 되돌려줍니다.
너는 컨트롤러를 이동할 수 있다.다시 렌더링할 때 실행할 함수 외부에 로그인하기 (
Component()function Component() {
...
const mutateAndRender = () => {
setCount((count) => count + 1);
};
console.log(`${getTime()} | count: ${count}`);
return ...
}
3. 행동도
이것은 업데이트된 도표입니다. 이제useState와setState의 역할을 알 수 있습니다.
요점을 요약하고 다시 말하다.
잘했어, 첫 번째 React 핵심 개념 시리즈를 완성했어.나는 분명히 이 시리즈를 계속할 것이다. 왜냐하면 아직도 많은 갈고리가 덮여 있기 때문이다.내가 이 블로그에서 제기한 심지 모형을 견지해 주십시오. 왜냐하면 나는 곧 다음 블로그에서 다시 그것을 인용할 것입니다.
이 문장을 통해 우리는 알게 되었다
테스트
실제로 내 사이트에 갑작스러운 테스트가 하나 있는데, 나는 네가 그것에 참가해서 너의 지식을 테스트할 것을 건의한다.
이것은link to the quiz
Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀
Reference
이 문제에 관하여(useState란 무엇이며, 왜 일반let을 사용하지 않습니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/theodorusclarence/react-core-concept-i-rendering-usestate-90e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
