react教程 (通过script引入)

最新推荐文章于 2024-06-11 11:15:33 发布

weixin_30596735

最新推荐文章于 2024-06-11 11:15:33 发布

阅读量3.1k

点赞数

文章标签： javascript 数据结构与算法 java ViewUI

原文链接：http://www.cnblogs.com/wfblog/p/9999637.html

版权

1、React 入门实例教程：http://www.ruanyifeng.com/blog/2015/03/react.html （阮一峰的博客）或 https://segmentfault.com/a/1190000012921279（作为阅读参考）

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

注意：Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

2、ReactDOM.render() ：将模板转为 HTML 语言，并插入指定的 DOM 节点。render() 里面的参数是 JSX 语法。这个方法类似于 vue 的，new Vue()，启动 react 引擎。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

注意：JSX 语法不是 JS 引擎解析的，所以不要完全使用js的语法规则去分析 JSX 代码。JSX 编译后的代码才是 js 代码。

3、组件：

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

注意，组件类的第一个字母必须大写，否则会生效，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会生效。

4、this.props.children ：参考，阮一峰的教程

5、PropTypes ：参考，阮一峰的教程

6、获取真实的DOM节点：参考教程

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。

根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

7、其他的参考教程

转载于:https://www.cnblogs.com/wfblog/p/9999637.html

weixin_30596735

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
react教程 (通过script引入)

1、React 入门实例教程：http://www.ruanyifeng.com/blog/2015/03/react.html（阮一峰的博客）或 https://segmentfault.com/a/1190000012921279（作为阅读参考）<!DOCTYPE html><html> <head> &l...
复制链接

扫一扫