为什么componentDidMount方法不会被调用在reactjs.net当我写的JSX

Question

我是小白，我尝试编译JSX下面这个教程：使用

http://xabikos.com/2015/03/18/Using-Reactjs-net-in-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从组件将安装”

但是当我评论Component Will Mount时，我没有收到DidM 'mount，只打印

的 “Hello World”

有谁知道这是为什么方法从不叫什么？

预先感谢您

Answer 1

你的问题是你不使用this.setState。您在this.state中手动分配新值。 React不知道再次调用render来更新组件，这就是您的组件不更新的原因。这并不是this.state没有改变。 React没有被告知更新屏幕上显示的内容。所以，这里就是你的代码中的生命周期方面发生了：

1. constructor：初始化一切（杜）
2. componentWillMount：在你的情况，设置this.state.name。 渲染尚未
3. render不会发生：呈现this.state.name，你在你的componentWillMount
4. componentDidMount已设置：设置this.state.name到新的价值。 没有说明更新您的渲染功能

如果您在使用componentDidMountthis.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没有被调用呢。但保持事物一致性是很好的。