javascript - Caching props in getDefaultProps an anti-pattern in React? - Stack Overflow

admin管理员组

文章数量:1332695

I am writing a plex react app and using Cortex as my central model. The philosophy with cortex is that it wraps your data and on changing the data, calls a plete re-render from the root. This works great especially when you have non hierarchical views changing state and affecting the other.

The issue that I am facing is maintaining states/props on re-render. For example I have a certain hierarchy which goes like this:

<Page>
  <EditorCard>
     <Editor/>
     <PublishButton/>
  </EditorCard>
</Page>

The EditorCard needs the JavaScript instance of the Editor in order to make changes to the Editor on clicking the PublishButton (I am using an external library inside Editor which exposes methods for editing). Hence the Editor on ComponentDidMount sets the instance as a prop on the EditorCard by calling a function passed down to it.

My issue is that when I click the PublishButton I change the value of the cortex object which causes a re-render from the root and I loose the props for that Editor (since ponent is already mounted ComponentDidMount is not called again).

The way I took care of this problem is by caching of getDefaultProps.

Inside EditorCard my default props are:

  getDefaultProps: function() {
    return {
      cachedData: {},
    }
  },

And is saving the editor instance as this.props.cachedData.editor = editorInstance

This saves props over multiple re-renders.

Is this how getDefaultProps caching was meant to be used? On saving props over multiple re-renders am I breaking some of the core react rules with this hack? Could you suggest a better structure if so?

I am writing a plex react app and using Cortex as my central model. The philosophy with cortex is that it wraps your data and on changing the data, calls a plete re-render from the root. This works great especially when you have non hierarchical views changing state and affecting the other.

The issue that I am facing is maintaining states/props on re-render. For example I have a certain hierarchy which goes like this:

<Page>
  <EditorCard>
     <Editor/>
     <PublishButton/>
  </EditorCard>
</Page>

The EditorCard needs the JavaScript instance of the Editor in order to make changes to the Editor on clicking the PublishButton (I am using an external library inside Editor which exposes methods for editing). Hence the Editor on ComponentDidMount sets the instance as a prop on the EditorCard by calling a function passed down to it.

My issue is that when I click the PublishButton I change the value of the cortex object which causes a re-render from the root and I loose the props for that Editor (since ponent is already mounted ComponentDidMount is not called again).

The way I took care of this problem is by caching of getDefaultProps.

Inside EditorCard my default props are:

  getDefaultProps: function() {
    return {
      cachedData: {},
    }
  },

And is saving the editor instance as this.props.cachedData.editor = editorInstance

This saves props over multiple re-renders.

Is this how getDefaultProps caching was meant to be used? On saving props over multiple re-renders am I breaking some of the core react rules with this hack? Could you suggest a better structure if so?

• javascript
• reactjs

Share Improve this question Follow edited Jan 31, 2016 at 5:19 Dmitry Shvedov 3,30644 gold badges4040 silver badges5656 bronze badges asked Apr 10, 2014 at 6:13 shilpanbshilpanb 15533 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

No, getDefaultProps is what it means to be: getting the default props in case the owner hasn't passed those to you. You could say it's a shorthand for a = this.props.bla || 'hello';.

That being said, if I'm understand your question correctly, I see three ways to solve it.

1. Cache that in your state instead. Props are passed by the parent and are meant to be read from, inside the child, at least in vanilla React.

2. Instead of putting that props passing logic in your ponentDidMount, why not put it in ponentDidUpdate?

3. ref lets you grab the instance and call its methods directly.

本文标签： javascriptCaching props in getDefaultProps an antipattern in ReactStack Overflow