부모-자식 의사 소통을 위해 소품을 전달하십시오.

state 를 사용 하여 현재 페이지에 필요한 데이터를 컨트롤러보기에 저장하십시오.

props 를 사용 하여 데이터 및 이벤트 핸들러를 하위 구성 요소로 전달하십시오.

이 목록은 구성 요소의 데이터를 작업 할 때 도움이됩니다.

소품

• 불변이다
  • React가 빠른 참조 확인을 수행 할 수있게합니다.
• 뷰 컨트롤러에서 데이터를 전달하는 데 사용됩니다.
  • 최상위 컴포넌트
• 더 나은 성능을
  • 이것을 사용하여 자식 구성 요소에 데이터를 전달

상태

• 뷰 컨트롤러에서 관리해야합니다.
  • 최상위 컴포넌트
• 변하기 쉬워
• 성능이 나쁘다
• 자식 구성 요소에서 액세스하면 안됩니다
  • 대신 소품으로 전달하십시오.

부모-자식 관계가없는 두 구성 요소 간의 통신을 위해 고유 한 글로벌 이벤트 시스템을 설정할 수 있습니다. componentDidMount ()에서 이벤트를 구독하고 componentWillUnmount ()에서 구독을 취소하고 이벤트를 수신하면 setState ()를 호출하십시오. 플럭스 패턴은 이것을 배열하는 가능한 방법 중 하나입니다. -https : //facebook.github.io/react/tips/communicate-between-components.html

어떤 구성 요소에 상태가 있어야합니까?

대부분의 컴포넌트는 소품에서 일부 데이터를 가져 와서 렌더링해야합니다. 그러나 때때로 사용자 입력, 서버 요청 또는 시간 경과에 응답해야합니다. 이를 위해 당신은 상태를 사용합니다.

가능한 많은 구성 요소를 상태 비 저장 상태 로 유지하십시오 . 이렇게하면 상태를 가장 논리적으로 격리하고 중복성을 최소화하여 응용 프로그램에 대한 추론을 쉽게 할 수 있습니다.

일반적인 패턴은 데이터를 렌더링하는 상태 비 저장 구성 요소를 여러 개 만들고 계층 구조에서 구성 요소 위에 상태 저장 구성 요소를 가져와 소품을 통해 하위 상태로 전달하는 것입니다. 상태 저장 구성 요소는 모든 상호 작용 논리를 캡슐화하고 상태 비 저장 구성 요소는 선언적인 방식으로 데이터 렌더링을 처리합니다. -https : //facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

어떤 상태로 가야합니까?

상태는 구성 요소의 이벤트 핸들러가 UI 업데이트를 트리거하기 위해 변경할 수있는 데이터를 포함해야합니다. 실제 앱에서는이 데이터가 매우 작고 JSON 직렬화 가능한 경향이 있습니다. 상태 저장 구성 요소를 빌드 할 때 가능한 상태의 최소 표현을 고려하고 해당 특성 만 this.state에 저장하십시오. render () 내부에서는이 상태를 기반으로 필요한 다른 정보 만 계산하면됩니다. 중복 또는 계산 된 값을 상태에 추가하면 React 컴퓨팅에 의존하지 않고 명시 적으로 동기화 상태를 유지해야하므로 이러한 방식으로 응용 프로그램에 대해 생각하고 작성하는 것이 가장 올바른 응용 프로그램으로 이어질 수 있습니다. -https : //facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

답변

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}

// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');

class DummyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }

}

// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />

                                                   소품 상태
    부모 Component에서 초기 값을 얻을 수 있습니까? 예 예
    상위 컴포넌트로 변경할 수 있습니까? 예 아니오
    컴포넌트 내에서 기본값을 설정할 수 있습니까? * 예 예
    컴포넌트 내부를 변경할 수 있습니까? 예
    하위 구성 요소의 초기 값을 설정할 수 있습니까? 예 예
    자식 구성 요소를 변경할 수 있습니까? 예 아니오

class SuperClock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
  }

  render() {
    return (
      <div>
        <Clock name={this.state.name} date={this.state.date} />
      </div>
    );
  }
}

const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);

function A(props) {
  return <h1>{props.message}</h1>
}

render(<A message=”hello” />,document.getElementById(“root”));

class A extends React.Component{
  constructor(props) {
    super(props)
    this.state={data:"Sample Data"}
  }
  render() {
    return(<h2>Class State data: {this.state.data}</h2>)
  }
}

render(<A />, document.getElementById("root"));