Question

虽然您不需要查看下面的代码来理解这个问题，但我添加了它以防您需要可视化方案。每当表单提交时，都会调用addList方法。

组件自行更新。但我没有想到这种行为，这就是为什么一开始我尝试将我的列表分配给状态，这样当状态改变时，组件会根据我的需要自行更新。

无论如何它已经自我更新，但为什么呢？哪种方式更有效？

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>
        )
    }  
}

Answer 1

所以如果我们添加一个componentWillUpdate反应生命周期方法来查看它是否重新渲染;

TableQuery.GenerateFilterCondition

当表单提交“将更新”时，按预期在控制台上记录。但是，如果我们将addList更新为;

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

我们在控制台上看不到输出“将更新”。这意味着被调用的方法不需要重新渲染组件。没有这样的规则。在这种情况下，它可能是关于TrackerReact。 TrackerReact可能会强制组件重新渲染。

在调用方法时，React组件是否会自行更新

1 个答案: