반응 상태 패턴 | 8일차
20982 단어 webdevbeginnersreactjavascript
요약 →
State
→ 시간에 따라 변할 수 있는 가변 값의 모음입니다.기존 상태 업데이트 중 →
앞서 우리는 State의 값을 변경/변경했지만 변경하지는 않았습니다.
죽이는 ⬇️로 증가하는
Scorekepper
구성 요소가 있는 예를 들어 봅시다 ⬇️class Scorekeeper extends Component{
constructor(props){
super(props);
this.state = {score:0};
this.onKill = this.onKill.bind(this);
}
onKill(){
this.setState({score:this.state.state+1});
}
render(){
return(
<div>
<h1> Score is : {this.state.score} </h1>
<button onClick={this.onKill}>One KILL</button>
</div>
)
}
}
따라서 버튼을 클릭할 때마다 점수가 1씩 업데이트됩니다.
그러나 이것은 편리한 방법이 아닙니다.
why??
아래 예를 살펴보겠습니다. 여기에는 이 점수만 클릭하면
Three kill
라는 버튼이 있습니다. 점수가 1씩 증가합니다.class Scorekeeper extends Component{
constructor(props){
super(props);
this.state = {score:0};
this.threeKill = this.threeKill.bind(this);
}
threeKill(){
this.setState({score:this.state.state+1});
this.setState({score:this.state.state+1});
this.setState({score:this.state.state+1});
}
render(){
return(
<div>
<h1> Score is : {this.state.score} </h1>
<button onClick={this.threeKill}>Three KILL</button>
</div>
)
}
}
그런데 왜 이것이 작동하지 않습니까 ??
🎯 setState는 비동기식입니다. 따라서 이전 호출이 완료되었다고 가정하는 것은 위험합니다. 또한 반응은 때때로 성능상의 이유로 setState에 대한 배치(함께 스쿼시) 호출을 하나로 합칠 것입니다.
이거봐 👇
threeKill(){
this.setState({score: 100});
this.setState({score: 150});
}
마지막 호출이 실행됩니다.
If a call to setState() depends on current state it’s better to use the “callbacks”
그러나 무엇입니까
Callbacks ?
**Like,**
function greet(name,callback){
const works = "Your work of Day is to plant the Trees"
const msg = `Good Morning ${name} ` + works;
callback(msg);
}
function log(msg){
console.log(msg);
}
greet("Jack" , log);
위의 예에서와 같이 로그 함수를 콜백으로 전달했습니다.
Greet 함수가 완료되면 실행이 완료되고 마지막에 로그 함수가 호출됩니다.
콜백을 전달하면 지금 실행하고 싶지 않기 때문에 괄호와 함께 전달하지 않습니다.
콜백이 필요한 이유 ??
API 또는 데이터베이스에서 데이터를 요청할 때 데이터가 언제 올지 모르기 때문에 이러한 모든 프로세스를 즉시 실행하지 않기 때문에 비동기식이라고 합니다.
그래서 우리는 함수가 실행될 때 콜백을 전달하고 콜백이 호출되고 그것이 업데이트되었음을 알게 되었습니다.
React의 경우와 동일
setState
메서드는 비동기식이므로 콜백을 사용할 수 있습니다.threekill(){
this.setState(currState)=>{
return {state:currState+1}
}
this.setState(currState)=>{
return {state:currState+1}
}
this.setState(currState)=>{
return {state:currState+1}
}
}
IncTo3(currState){
return {state:currState+1};
}
threeKill(){
this.setState(this.IncTo3);
this.setState(this.IncTo3);
this.setState(this.IncTo3);
}
나는 당신 중 일부가 우리가 이렇게 할 수 있다고 생각하고 있다는 것을 알고 있습니다 😅
threeKill(){
this.setState({score:this.state.state+3});
}
그러나 이것은
If a call to setState() depends on current state it’s better to use the “callbacks”
를 알려주는 예일뿐입니다.안전한 방법으로 상태 변경하기 →
u have to be extra careful while modifying the Array.
내가 임의의 이름을 선택하고 유지하는 임의의 숫자 선택기가 있는 것처럼.
class NumPicker extends Component{
static defaultProps = {
names : ["Jayant","Dushyant","Nitin","gaurav","kartik"]
}
constructor(props){
super(props);
this.state = {arr:["John ","sam "]}
}
Randomizer(){
const rand = Math.floor(Math.random()*this.props.names.length);
console.log(rand);
console.log(...this.state.arr,this.props.names[rand]);
//It will make a copy of the arr object with an extra name.
return this.setState({arr:[...this.state.arr,this.props.names[rand]]})
}
render(){
return(
<div>
<h1>Random Names are :{this.state.arr} </h1>
<button onClick={this.Randomizer}>Randomizer</button>
</div>
)
}
}
자세한 내용은 이 기사를 읽으십시오 👇
Handling State in React: Four Immutable Approaches to Consider
디자인 상태 😁
상태 최소화
하향 데이터 흐름
부모는 대부분의 상태를 가져야 하며 상태를 사용하여 전달됩니다.
할 일 목록의 예를 들어 보겠습니다.
그것은
To-do list
구성 요소, To-do
구성 요소를 가지며 To-do 구성 요소에는 훨씬 더 작은 구성 요소가 있습니다. 따라서 우리가 할 수 있는 것은 변경되는 모든 데이터를 상태로 유지하고 이를 소품으로 전달하는 것입니다.행복한 코딩 😄
Reference
이 문제에 관하여(반응 상태 패턴 | 8일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jay818/react-state-pattern-day-8-5e03텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)