개시하다

Fullstack React: 30 Days of React의 의역.
조금 읽었기 때문에 간신히 번역하려고 했어요.지칠 때까지 계속해.상당히 의역하다.

Day1 - What is React?

Day2 - What is JSX?

Day3 - Our First Components

Day4 - Complex Components

Day5 - Data-Driven Components

오늘 좀 취했어요.

정편

오늘 우리는 완전한 상태 구성 요소를 진행할 것이다.언제 React에서 State를 사용하는 것이 좋을지 살펴보겠습니다.
나는 처음 5일 안에 React의 기초를 알게 될 것이라고 생각한다.JSX, 어셈블리의 모/자 관계, 속성 등입니다.Day6에서 State의 또 다른 주요 요소는 다음과 같습니다.

The state of things

React에서는 속성을 변경할 수 없습니다this.prop.Day5<Header /> 구성 요소의 제목을 수정했다고 가정합니다.이러면 원래 제목이 뭔지 몰라요.부모 구성 요소에서 받은 속성을 하위 구성 요소로 변경할 수 있다는 것은 좋지 않은 생각입니다.
그러나 물론 구성 요소에서 수치를 유지하고 업데이트하고 싶은 경우도 있다.예를 들어 초시계의 예를 생각해 보세요.
가능한 한 속성을 사용하는 것이 좋지만 상태를 유지해야 할 때 State를 사용할 수 있습니다.
state는 구성 요소와 하위 구성 요소만 접근합니다. (부모가 접근하지 않는 것이 좋습니까?)this.state를 통해state에 접근할 수 있으며 this.setState()에서 값을 변경하면view를 다시 나타냅니다.
간단한 손목시계 부품을 봅시다.

※ 본가라면 이동한다
이 구성 요소는 현재 시간을 유지해야 합니다.state를 사용하지 않아도 전체 화면을 다시 렌더링해서 시간을 업데이트할 수 있지만, 다른 구성 요소는 다시 렌더링할 필요가 없을 수도 있습니다.
따라서state를 사용하면 구성 요소 내에서 시간을 유지하고 값을 업데이트하고 재현할 수 있습니다.
우리 이 조립품을 만들자.state 화제에 들어가기 전에 render()만 진행하는 구성 요소를 간단하게 적으세요.시간의 0충전과am/pm의 분기 등을 고려해야 하지만 대체로 다음과 같다.

class Clock extends React.Component {
  render() {
    const currentTime = new Date(),
          hours = currentTime.getHours(),
          minutes = currentTime.getMinutes(),
          seconds = currentTime.getSeconds(),
          ampm = hours >= 12 ? 'pm' : 'am';

    return (
      <div className="clock">
        {
          hours == 0 ? 12 :
            (hours > 12) ?
              hours - 12 : hours
        }:{
          minutes > 9 ? minutes : `0${minutes}`
        }:{
          seconds > 9 ? seconds : `0${seconds}`
        } {ampm}
      </div>
    )
  }
}

이렇게 하면, 테이블의 표시를 업데이트하기 위해서는 페이지를 하나하나 업데이트해야 한다.그럼 못 써.유용한 시계가 되기 위해서는 매 초에 한 번씩 시각의 표식을 갱신해 주시기 바랍니다.
이를 위해서는 초당 현재 시간을 가져와야 하지만 우선 초기 시간을 설정해야 한다.ES6의 기법으로 구조기에서 state의 초기 값을 설정할 수 있습니다.

class Clock extends React.Component {
  constructor(props) {
    super(props);   // ALWAYS required

    const currentTime = new Date();
    this.state = {
      hours: currentTime.getHours(),
      minutes: currentTime.getMinutes(),
      seconds: currentTime.getSeconds(),
      ampm: currentTime.getHours() >= 12 ? 'pm' : 'am'
    };
  }
  // ...
}

항상 첫 줄이 필요하다super(props).이것을 잊으면 네가 매우 싫어하는 일이 발생할 것이다.React.createClass()를 사용할 때 구조기를 사용하지 않고 함수를 정의하고 대상을 되돌려 주어야 한다.아래의 느낌입니다.

const Clock = React.createClass({
  getInitialState: function() {
    const currentTime = new Date();
    return {
      hours: currentTime.getHours(),
      minutes: currentTime.getMinutes(),
      seconds: currentTime.getSeconds(),
      ampm: currentTime.getHours() >= 12 ? 'pm' : 'am'
    }
  }
})

이렇게 state는 초기 값을 설정하여render 함수에서state에 접근할 수 있습니다.렌더 함수를 고쳐 보세요.

  render() {
    const {hours, minutes, seconds, ampm} = this.state;
    return (
      <div className="clock">
        {
          hours == 0 ? 12 :
            (hours > 12) ?
              hours - 12 : hours
        }:{
          minutes > 9 ? minutes : `0${minutes}`
        }:{
          seconds > 9 ? seconds : `0${seconds}`
        } {ampm}
      </div>
    )
  }

다음은 getInitialState() 1000ms마다 업데이트setTimeout()를 사용하세요.나중에 호출할 수 있도록 이 기능을 함수로 정의합니다.

class Clock extends React.Component {
  constructor(props) {
    super(props);   // ALWAYS required

    const currentTime = new Date();
    this.state = {
      // ...
    };

    this.setTimer(); // start up the timeout
  }

  setTimer() {
    setTimeout(this.updateClock.bind(this), 1000);
  }

  updateClock() {
    // This will be called in one second
  }
  // ...
}

다음 절에서 생명주기 연결을 설명하고, 먼저 구조기에 쓰세요.this.state 함수에서 새로운 시간에state를 업데이트해야 합니다.이런 느낌이에요.

class Clock extends React.Component {
  // ...
  updateClock() {
    const currentTime = new Date();
    this.setState({
      hours: currentTime.getHours(),
      minutes: currentTime.getMinutes(),
      seconds: currentTime.getSeconds(),
      ampm: currentTime.getHours() >= 12 ? 'pm' : 'am'
    })
  }
  // ...
}

구성 요소가 마운트되면 1초 (1000ms) 동안 시간을 업데이트합니다. 그러면 한 번만 업데이트하고 끝납니다.함수의 마지막 호출 함수updateClock(), 1초 후에 다시 업데이트합니다.

class Clock extends React.Component {
  // ...
  updateClock() {
    const currentTime = new Date();
    this.setState({
      // ...
    })
    this.setTimer();
  }
  // ...
}

이 구성 요소의 재작성은timeout 함수보다 느릴 수 있습니다.이것은 렌더링의 병목을 일으켜 이동 설비의 낭비와 낭비를 초래했다.함수를 매개 변수setTimer()에 전달하는 방법을 사용할 수 있습니다. 예를 들어 다시 렌더링한 후에 setTimer()라고 합니다.
※ 보충: setState() 처리가 끝나지 않았을 때, 다음setState()은 처리대열에서 쌓아온 인상을 준다.나는 이 구성 요소가 먼저 발생하지는 않을 것이라고 생각하지만, 복잡한 재과장을 하기 위해서는 기억하는 것이 비교적 좋다

Update our activity list

Day5에서 볼 수 있는 이벤트 목록의 제목 구성 요소를 개량해 보세요.벌레안경 로고를 클릭하면 input 요소가 표시됩니다.

state를 사용하면 input의 보이거나 보이지 않는 상태를 유지할 수 있습니다.

class Header extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchVisible: false
    }
  }

  // toggle visibility when run on the state
  showSearch() {
    this.setState({
      searchVisible: !this.state.searchVisible
    })
  }

  render() {
    // Classes to add to the <input /> element
    let searchInputClasses = ["searchInput"];

    // Update the class array if the state is visible
    if (this.state.searchVisible) {
      searchInputClasses.push("active");
    }

    return (
      <div className="header">
        <div className="fa fa-more"></div>

        <span className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className={searchInputClasses.join(' ')}
          placeholder="Search ..." />

        {/* Adding an onClick handler to call the showSearch button */}
        <div
          onClick={this.showSearch.bind(this)}
          className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

기억해 주셨으면 좋겠습니다.

setState() 객체를 this.setState（）에 넘긴 후 객체를 섀도우와 결합하고 어셈블리를 다시 렌더링합니다.(보충: 밑줄 합병은 같은 키를 가지고 있으며, 이 키가 다른 대상이 있어도 이 대상은 합병되지 않고 덮어쓰임)

state에서만 나타나는 값만 보존합니다.CPU를 낭비할 수 있기 때문이다.

처음에 썼듯이 상태가 완전한 구성 요소 테스트는 매우 어렵습니다. 가능하면 주의하십시오. this.state상태 전체 어셈블리를 처리하는 방법은 Day6에서 배웠습니다.Day 7에서는 구성 요소의 수명 주기와 페이지를 교환하는 방법에 대해 살펴보겠습니다.