Could hydrate stop modify the content of component, just binding events?

loki951753
创建于
2018-04-24 10:11:52

Since my web application run PHP server as backend, I cannot use ReactDOMServer. With lots of restrictions and conventions, I translate JSX to a template language.

class SSRCom extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            count: 1
        };

        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        this.setState({
            count: ++this.state.count
        });
    }
    render() {
        const {count} = this.state;
        return (
            /* @ssr #mount */
            <div>
                Hello SSR: {count}
               <button onClick={this.handleClick}>change state</button>
            </div>
        );
    }
}

ReactDOM.hydrate(
    <SSRCom />,
    document.querySelector('#mount')
);

parse the mount node and JSX AST, and then write the result to a template file.

<div id="mount">
  <div>
    Hello SSR: {{ count }}
    <button>change state</button>
  </div>
</div>

Sounds crazy?

Now the server can render the template as expected. However, react hydrate will modify the component content. So could hydrate stop modify the content of component, just binding events? Or some other ways like modify the react render method to quit the check mechanism?

1条回答
loki951753
回复于
2018-04-25 09:44:22
#1

After some test, it seems that the way I describe in the question can work as I expected. Some extra work is:

  1. keep consistency by write the count to a <script type="text/template">{{count}}</script> in the template. The client parse it and get the count as initial state.
  2. set suppressHydrationWaring={true}

Now it can work.

当前位于第1页,总计1 条回复

推荐相似问题

`TypeError: 'undefined' is not a function (evaluating 'n.startsWith(e)')` & `React` & `AntD`

TypeError: 'undefined' is not a function (evaluating 'n.startsWith(e)') & React & AntD report a bug? TypeError: 'undefin
讨论数 13
react
创建时间:2018-04-24 06:22:01

validateDOMNesting incorrectly validates table children

Do you want to request a feature or report a bug? bug What is the current behavior? validateDOMNesting shows warning whe
讨论数 2
react
创建时间:2018-04-24 05:30:14

Duplicated key in list has strange behavior!

I have a list which has duplicated items. From the document, key must be unique, but I'm not sure why React concatenates
讨论数 2
react
创建时间:2018-04-24 01:44:26

Improve warning message for failure to initialize `state` when using `getDerivedStateFromProps`

Do you want to request a feature or report a bug? bug What is the current behavior? The warning for a failure to initial
讨论数 5
react
创建时间:2018-04-23 15:29:28

Cannot detect any clicks on elements inside google map infowindow; React

I have created a div element inside a google map infowindow using reactDomServer.renderToString and am trying to registe
讨论数 3
react
创建时间:2018-04-22 09:34:12

Get State Of Parent From Child (without passing state as props)

Is it true to get state (and all of its methods) of parent component from child using this keyword? class App extends Co
讨论数 3
react
创建时间:2018-04-22 09:24:37

React background image overlay opacity

Do not find a way that how to set background image overlay opacity in reactjs, I am trying to do something like that. ST
讨论数 2
react
创建时间:2018-04-21 08:08:45

Embed does not update on re-render after src property changes

Do you want to request a feature or report a bug? Bug What is the current behavior? There is a component which renders a
讨论数 6
react
创建时间:2018-04-21 03:36:25

[Question] How to deal with RenderProps Components callback hell?

This issue is somewhat long. If you are eager, goto the FINAL_BUT. How to deal with RenderProps Components callback hell
讨论数 2
react
创建时间:2018-04-20 19:33:58

Skip second argument in React.createElement()

Do you want to request a feature or report a bug? A feature What is the current behavior? React.createElement(component,
讨论数 2
react
创建时间:2018-04-20 16:51:35