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

【问题标题】：If render functions should be pure, how the view can get changed based on state?如果渲染函数应该是纯的，如何根据状态更改视图？
【发布时间】：2017-05-14 10:47:50
【问题描述】：

我是新手，在阅读教程时我发现了这个，

“render() 函数应该是纯函数，即不修改组件状态，每次调用都返回相同的结果，不直接与浏览器交互。” - https://facebook.github.io/react/docs/react-component.html#reference

我对此有点困惑。如果渲染函数每次都应该返回相同的结果，我该如何根据状态修改显示？

例如，我有带有编辑按钮的文本。当我点击编辑时，应该会出现文本框，其中包含文本内容和编辑按钮更改以保存。

【问题讨论】：

我认为render是mvc的view组件的一个功能。您可以使用flux 或redux 修改的模型和控制器。简而言之：从默认状态/模型开始 => 给视图状态和状态生成 html => 用户点击某些东西，因此视图创建一个动作 => 动作由存储（flux/redux）处理，动作处理程序返回新状态 => 新状态被赋予视图 => ...
渲染函数应该总是为 current 状态返回相同的结果。渲染函数基本上是一个以当前状态为参数的函数（实际上，这就是无状态组件所做的）。
slideshare.net/nikgraf/react-redux-introduction 幻灯片 33
调用具有相同参数集的纯函数将始终返回相同的值

标签： javascript reactjs stateless

【解决方案1】：

“render()函数应该是纯函数，也就是说它不修改组件状态，每次调用都返回相同的结果，不直接与浏览器交互。” - https://facebook.github.io/react/docs/react-component.html#reference

绝对是反应中的正确陈述。无法在 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 函数中，我们更改了在渲染中使用的状态。希望这会有所帮助

【讨论】：