React 为复杂处理存储数据

Question

I am somewhat new to ReactJS.

I want to store data for complicated computations in ReactJS. Since the setState is asynchronous, I cannot be bothered to store all the required data inside state as it would be next to impossible to do what I want.

I was thinking of doing the following: store the needed variables inside an object inside the state itself. Eg the state defined in the constructor is the following object

constructor(props){
    this.state = { complicated_storage: { x : 123, y : 324 } }
}

This way I can manipulate this.state.compicated_storage.x or this.state.compicated_storage.y , and do stuff like this.state.compicated_storage.x = 4 without worrying about asynchronous behavior.

Is this a bad way of doing stuff in ReactJS. I noticed that with this you can bypass the entire setState mechanism, and just store all my variables inside the object within the state .

Thank You

Answer 1

Is this a bad way of doing stuff in ReactJS. I noticed that with this you can bypass the entire setState mechanism, and just store all my variables inside the object within the state.

The entire purpose of state is re-rendering components whenever it changes. If you modify it directly, such as state.someVariable = 2 , React will not know about your change, and it will not rerender your components after the change (however, the change will be reflected if something else later causes a rerender).

If you need a change to some data trigger a rerender and update the view, use state together with setState .

If not, you can simply use a class field, rather than store it inside state.

Besides, I'm not sure in what way asynchrony you think will impede your goals, so perhaps you should be clearer there. State being asynchronous just means that changes to state are made "a little later" after the function is called (it's a whole other topic), so React can batch updates for performance reasons.

Last but not least, you should look into hooks (useState), instead of using class components.