当一个方法被调用时，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组件是否自动更新自身

回答

相关问题