如果渲染函数应该是纯粹的，则如何根据状态更改视图

Question

我是新手的反应，在浏览教程时，我发现了这个，

• " Render（）函数应纯净，这意味着它不会修改组件状态，每次调用时都会返回相同的结果，并且不会直接与浏览器交互。"-https：//facebook.github.io/react/docs/reeact-component.html#reference

我对此有点困惑。如果渲染函数应每次如何根据状态修改显示？

时返回相同的结果？

例如，我有带有编辑按钮的文本。当我单击"编辑"时，文本框应带有文本的内容和编辑按钮更改以保存。

Answer 1

" Render（）函数应该是纯粹的，这意味着它不会修改组件状态，每次调用时都会返回相同的结果，并且不会直接与浏览器交互。"-https：//facebook.github.io/react/docs/reaect-component.html#reference

绝对是React中的正确陈述。不能在render方法中更改状态。您可以访问渲染内部的状态，但可以更改。要更改状态，我们在回调方法中使用setState函数，该方法设置了新状态并准备更改组件中的任何地方。

注意：setState希望首先初始化状态。 getInitialState是相同的函数，并在下面的示例中给出

例如。

var firstName = 'Anand';
var testExample = React.createClass({
    getDefaultProps: function () {
        return {
            name: 'React',
            message: 'This is the default message!'
        };
    },
    getInitialState: function () {
        return {
            name: this.props.name
        };
    },
    handleNewName: function (name) {
        this.setState({
            name: name
        });
    },
    render: function () {
        var name = this.state.name;
        var message = this.props.message;
        return (
            <div>
                <h1>{message}</h1>
                <h2>{name}</h2>
            </div>
        );
    }
});

在handleNewName功能内部，我们更改了然后在渲染中使用的状态。希望这有帮助