值是否应该存储在组件实例上？

Question

Can I ever do something like this? Does it avoid issues with asynchronous state changes?

class Widget extends React.Component {

  constructor () {
    this.value = '123';
  }

  render () {
    var hello = this.value;
    // ...
  }
}

Answer 1

Yes you can use Class properties to store data, and you can use that in render method. For eg: constants

But you will have to use state to store data that directly affects how a component is rendered, and use setState function to update state as this triggers component re-render. Setting data in simple class property wont re-render component.

Does it avoid issues with asynchronous state changes? No. after your asynchronous operation, for eg: an ajax api fetch, if you are simply setting this.data = fetchedData ReactDom wont know that new data has arrived and it should re render the component. But if you are using setState there it will know and it can trigger all the needed lifecycle methods and render method.

Answer 2

Can I ever do something like this?

Yes sure.

Does it avoid issues with asynchronous state changes?

No, indeed it makes things worse. For state changes, use setState !

Answer 3

 class Widget extends React.Component { constructor () { this.state = { value: '123' } } render () { var hello = this.state.value; // ... } } 

Answer 4

Yes you can do that. But whenever the value will be changed like

this.value = "newValue"

the changes will not be reflected in the VIEW as render() will not be called by this.

You can just set the state for viewing this change instantly by setting a random id change in state like

this.value = "newValue"; 
this.setState({id:Math.random()});