1더하기1은 귀요미
한눈 팔지마 누가 뭐래도 내꺼

以前はrenderを使用してUIを更新していました

function tick() {
  const element = (
    

      
Hello, world!
      

        {new Date().toLocaleTimeString()}.
      
    
  );
  ReactDOM.render(
    element,
    document.querySelector('#root')
  );
}

setInterval(tick, 1000);

関数全体を更新したことがわかります
クロックClockを単独でカプセル化することで、Clockコンポーネントを1回書くとクロックが自動的に更新されます.

class Clock extends React.Component {
constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      

        
Hello, world!
        

          {this.state.date.toLocaleTimeString()}.
        
      
    );
  }
}
ReactDOM.render(
  ,
  document.getElementById('root')
);

クラスにライフサイクルメソッドを追加Clockコンポーネントが初めてDOMにロードされるたびに、Reactでは と呼ばれ、Clockで生成されたこのDOMが除去されるたびに、Reactでは と呼ばれるタイマをクリアしたいと考えています.
マウント時にタイマーを設定するには、次の手順に従います.

 componentDidMount() {
    var this.timer = setInterval(()=>{
      this.tick();
},1000)
  }

アンインストール時にタイマーをクリアします.

 componentWillUnmount() {
    clearInterval(this.timer);
  }

tickは状態を変える関数です.

tick=()=>{
  this.setState(){
  date:new.Date()
}
}

完全なコード:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      

        
Hello, world!
        
It is {this.state.date.toLocaleTimeString()}.
      
    );
  }
}

ReactDOM.render(
  ,
  document.querySelector('#root')
);

≪データ・フローの問題｜Data Flow Problem｜oem_src≫:データが上から下へ流れる:コンポーネントは、そのステータスを属性としてサブコンポーネントに渡すことを選択できます.これを、上から下または一方向のデータ・フローの親コンポーネントと呼びます.

サブアセンブリ

console.log(this.props.name)

親コンポーネントが子コンポーネントのデータを使用する必要がある場合:親コンポーネント

var fn = (ele)=>{
console.log(ele);
}

サブアセンブリ

var fe = ()=>{
  this.props.fn(ele);
}

これで親コンポーネントはサブコンポーネントからのデータを手に入れることができます!!!
setStateの問題について、

setstateは非同期の

です

の最初のパラメータは1であることができる.object 2.function(前回の状態)

setStateの2つのパラメータについて、2番目のパラメータはcallbackであり、オプションであり、2番目のパラメータでのみ最新のUIと同期した状態を取得することができる.