V0.14版本之前 | V0.14版本之后 |
---|---|
通过React.createClass方式创造组件类 | 通过class 类名 extends Component { |
React.render | ReactDOM.render |
React.findDOMNode | ReactDOM.findDOMNode |
react component上的ref属性指向的是对React DOM Component 的引用,并不是页面上真实的DOM节点 | ref开始指向真实的DOM节点 |
需要引入: react.js -> React主要核心 JSXTransformer.js -> 为了把 JSX 转成标准的 JavaScript | 需要引入: react.js -> React主要核心 react-dom.js -> React DOM 操作 browser.min.js -> 将 babel 转换成浏览器可用的 ES5(这是Babel.js的浏览器版本) |
const Sample = React.createClass({ getInitialState: function() { return {foo: 'bar'}; }, getDefaultProps: function() { return {sampleProps: 0} } }); | class Sample extends React.Component { constructor(props) { super(props); this.state = {foo: 'bar'}; } }; Sample.defaultProps = { sampleProp: 0 }; |
React.render 与 ReactDOM.render
V0.14版本之后把react分成了react和react-dom两个部分,这样就为web端的react和移动端的React Native共享组件铺平了道路,也就是说我们可以跨平台使用相同的react组件。
react-dom包包括ReactDOM.render,.unmountComponentAtNode和.findDOMNode。在 react-dom/server ,有ReactDOMServer.renderToString和.renderToStaticMarkup服务器端渲染支持。
总的来说,两者的区别就是:ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂,一般用来定义单一的组件,或者结合ReactDOM.findDOMNode()来使用。更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码,并将其移动到一个更合适的存储库。