当我在JSX上写入时，为什么在ReactJs.net中未调用ComponentDidmount方法

Question

我是一个菜鸟，我正在尝试在本教程之后编译JSX：

http://xabikos.com/2015/03/18/using-reactjs-net-inet-inet-inet-web-forms/

使用reactjs.net``

在我的helloworld.jsx中

class PageContent extends React.Component {

    componentDidMount() {
               this.state = { name: "Hello World from ComponentDidMount" };
    }
    constructor(props) {
        super(props);
        this.state = { name: "Hello World" };
    }
    componentWillMount() {
        this.state = { name: "Hello World from ComponentWIllMount" };
    }
    render() {
        return <h1>{this.state.name}</h1>
    }
}

在我的ReactConfig.cs

中

        ReactSiteConfiguration.Configuration
        .AddScript("~/Scripts/components/helloWorld.jsx");

在我的default.aspx.cs

中

        var env = AssemblyRegistration.Container.Resolve<IReactEnvironment>
        ();
        var objectModel = new { user = "React User" };
        var reactComponent = env.CreateComponent("PageContent", 
        objectModel);
        PageContent.Text = reactComponent.RenderHtml();

页面似乎可以正常工作

它打印

"来自组件的Hello World会安装"

但是，当我评论组件时，我不会收到来自Didmount的任何东西，它只会打印

" Hello World"

有人知道为什么这种方法从未调用？

预先感谢您

Answer 1

您的问题是您不使用this.setState。您正在手动分配this.state中的新值。React不知道再次致电render以更新组件，这就是为什么您的组件不更新的原因。并不是说this.state没有改变。这是没有被告知要更新屏幕上显示的内容的。因此，这是您的代码在生命周期中发生的事情：

1. constructor：初始化所有内容（duh）
2. componentWillMount：在您的情况下，设置this.state.name。渲染尚未发生
3. render：渲染this.state.name，您在componentWillMount中设置了
4. componentDidMount：将this.state.name设置为您的新值。没有说明更新您的渲染功能

如果您在componentDidMount中使用this.forceUpdate()，则在将this.state.name分配给其新值后，我相信它将更新，但这是非常糟糕的练习。改用this.setState。

componentDidMount() {
    this.setState({ name: "Hello World from ComponentDidMount" });
}
componentWillMount() {
    this.setState({ name: "Hello World from ComponentWillMount" });
}

正如您在代码中注意到的那样，this.setState在componentWillMount中并不是完全必要的，因为尚未调用render。但是最好保持一致。