React and well-designed jquery plugins are not incompatible with the problem.

Copyright belongs to the author.
Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.
Fluxxu
Links: http://www.zhihu.com/question/36045843/answer/67064767
Source: Know

React and well-designed jquery plugins are not incompatible with the problem.
What I call a well-designed plugin is that you give him an element, and he only operates in this element, not around. There is also the way it provides security destroy that can be called.
In general, for example, you want to use a jquery AutoComplete plugin that you initialize in jquery:

$(‘#input‘).autocomplete();

Inside the react, you wrap it up like this:

React.Createclass({Shouldcomponentupdate(){ReturnFalse;Tell react this component we're going to do it ourselves, don't touch it.},Componentdidmount(){$(this. Getdomnode ()). autocomplete (); }, componentwillunmount () {$< Span class= "P" > (this. Getdomnode ()). autocomplete ( ' destroy ' //call plug-in cleanup function }, render () {return <input type=  "text" />}             

Occasionally have a brain residue plugin, do not want to take a selector string initialization, you can deal with:

var counter = 0;React.createClass({    shouldComponentUpdate() {        return false;    },    componentWillMount() {        this.__elementID = ‘naocan_‘ + (++counter); //强制给他分配一个唯一的id    },    componentDidMount() {        this.__instance = naocan.init({            selector: ‘#‘+this.__elementID        });    },    componentWillUnmount() {        this.__instance.destroy();    },    render() {        return <input id={this.__elementID} type="text" />;    }});

React and well-designed jquery plugins are not incompatible with the problem.