當一個方法被調用時，React組件是否自動更新自身

雖然你不需要看下面的代碼來理解這個問題，但我添加了它，以防需要可視化場景。每當表單提交時，都會調用addList方法。當一個方法被調用時，React組件是否自動更新自身

組件自我更新。但是我並沒有期待這種行爲，這就是爲什麼起初我試圖將我的列表分配給狀態，以便當狀態改變時組件會根據我的意願更新自己。

無論如何它已經更新自己，但爲什麼？哪種方式更有效率？

import React,{Component} from 'react'; 
import TrackerReact from 'meteor/ultimatejs:tracker-react'; 
import {Lists} from '../lib/collections/lists.js'; 

export default class App extends TrackerReact(Component) { 
    constructor(){ 
     super(); 
     // this.state = {lists : this.lists()} 
    } 
    lists(){ 
     return Lists.find().fetch(); 
    } 
    addList(e){ 
     e.preventDefault(); 
     //let text = this.refs.list.value ; 
     let text = this._inputList.value ; 
     console.log(this._inputList.value); 
     Lists.insert({ 
      title : text 
     }); 
     this._inputList.value = ""; 

     //this.setState({lists : this.lists()}); 
    } 
    render() { 
     return (
      <div> 
       <h2>Lists</h2> 
       <ul> 
        {this.lists().map((a,b)=>(
         <List key={a._id} title={a.title} /> 
        ))} 
       </ul> 
       <form onSubmit={this.addList.bind(this)}> 
        <input 
         type="text" 
         ref={(input)=>{ 
          this._inputList = input ; 
         }} 
         placeholder="add list bro" 
        /> 
       </form> 
      </div> 
     ) 
    } 
}

來源

2016-05-03 FurkanO

因爲您最有可能導入的列表正在更新並導致頂層組件重新呈現。然後調用get和re更新 –

如果我沒有任何數據流，那麼我只是在提交併調用一個方法，會導致組件的重新渲染而沒有改變狀態？ – FurkanO

當您提交頁面時，頁面是否重新加載？ –

所以，如果我們添加一個componentWillUpdate反應生命週期方法，看看它是否重新呈現;

componentWillUpdate() { 
console.log('will update');  
}

表單提交的「將更新」在控制檯上按預期登錄。但是，如果我們更新addList爲;

addList(e){ 
    e.preventDefault(); 
    // nothing else. 
}

我們在控制檯上看不到輸出「will update」。這意味着被調用的方法不需要組件被重新渲染。沒有這樣的規則。在這種情況下，它可能是關於TrackerReact的。 TrackerReact可能會強制組件重新渲染。

來源

2016-05-03 00:35:26 FurkanO

當一個方法被調用時，React組件是否自動更新自身

回答

相關問題