React（3）ライフサイクル

ライフサイクルプロセス：

1.最初のレンダリング表示を初めて入力します：render（）

• コンストラクター（）：状態を初期化するオブジェクトを作成します
• componentWillMount（）：コールバックが挿入されます
• render（）：仮想DOMコールバックを挿入するために使用されます
• componentDidMount（）：コールバックが挿入されました

2.毎回状態を更新します：this.setState（）

• componentWilIUpdate（）：コールバックが更新されます
• render（）：更新（再レンダリング）
• componentDidUpdate（）：コールバックが更新されました

3.コンポーネントを取り外します

• ReactDOM.unmountComponentAtNode（document.getElementById（ 'example'））
• componentWillUnmount（）コンポーネントは削除されますコールバック

栗：

/*
  需求: 自定义组件
    1. 让指定的文本做显示/隐藏的动画
    2. 切换时间为2S
    3. 点击按钮从界面中移除组件界面
   */
   class Animation extends React.Component{
    
    
     constructor(props){
    
    
       super(props)
       this.state = {
    
    
         opacity: 1
       }
     }
     componentDidMount(){
    
    
       let {
    
    opacity} = this.state
       setInterval(() => {
    
    
        if(opacity*10 >0){
    
    
          opacity -= 0.1
        } else {
    
    
          opacity = 1
        }
        this.setState({
    
    opacity})
       }, 500)
     }
     render(){
    
    
       let opacity = this.state.opacity
       return(
         <div style={
    
    {
    
    opacity}}>
          gogoogogogogogogogog
         </div>
       )
     }
   }
   ReactDOM.render(<Animation/>, document.getElementById('example'))

差分アルゴリズム

ページの再描画を最小限に抑えます
。変更の前後で変更された部分を比較します。比較された部分はレンダリングされ、変更されていない他の部分はレンダリングされません。

この場合問題があります

これは以前のように書くことはできず、エラーを報告します<a href="javascript:;"
。Reactではこのように書く必要があります。

ここでpropは値で渡されることを忘れないでください。分解された割り当てではなく、名前を書くだけです。