React学习

React根本上其实就是一个JavaScript库。

它体现了前后分离的思想，将部分组装页面的工作转交给浏览器来完成；不像JSP文件，页面的布局和填入数据是在服务器完成后发送给浏览器的的。

这样做的好处自然有很多：首先，React将DOM&JavaScript封装成模块(组件)，这些组件的可复用性很强，不仅如此，组件也可以让测试和关注分离变得简单。其次，当数据变化的时候，React能够自动更新用户界面，并且仅更新需要更新的部分。

想要进行React的初步学习的测试，可以戳这里：
http://jsfiddle.net/69z2wepo

核心函数1:render

这个函数的功能就是提供一个模块，它就像是乐高玩具的一块积木，用来组装页面。

简单示例：（先给出的是HTML代码，后给出的是JSX代码。JSX就是JavaScript+XML的意思）

<div id="container" class="firstContainer">
  <div>replaced</div>
</div>
/*************************************************/
ReactDOM.render(
    <div>Hello,world!</div>,document.getElementsByClassName('firstContainer')[0]
);

可以看到 class 为 firstContainer 的div的内容被替换掉了，替换成了我们在render中写入的代码：hello world！

另外document.getElementsByClassName(‘firstContainer’)[0]可以替换成任何原生的JavaScript获取**单独某一个（一定是一个Node，因此如果你使用document.getElementsByClassName这样的方法必须要加上[n]）**DOM元素的方法：document.getElementById或者document.getElementsByTagName等都可以。

更复杂一点的例子，我们可以来将这里的<div>Hello,world!</div> 扩充一下。

<div id="container" class="firstContainer">
  <div>replaced</div>
</div>
/*************************************************/
var name = "Emily";
ReactDOM.render(
  <div>
  {
    (function(){
        return <div>Hello,{name}!</div>
    })()
  }
  </div>,document.getElementById('container')
);

我们可以看到JSX语法的神奇之处了，在代码中，JS和DOM可以说是混杂在一起的。而JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

核心函数2:React.createClass

这个函数允许我们自己定义需要的组件，定义好的组件可以作为像div这样的标签一样，直接应用于render函数中。

一个简单的栗子：

<div id="container" class="firstContainer">
  <div>replaced</div>
</div>
/*************************************************/

var HelloWorldBox = React.createClass({
  render: function() {
    return (
      <div className="helloWorldBox">
        Hello,world! I am a helloWorldBox.
      </div>
    );
  }
});
ReactDOM.render(
  <HelloWorldBox />,document.getElementById('container')
);

在这个栗子里，HelloWorldBox就是一个最简单的组件。

关于这个组件，我们还可以获取更多信息。例如，使用props

（实例来自React官网）

<div id="container" class="firstContainer">
  <div>replaced</div>
</div>
/*************************************************/
var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </div>
    );
  }
});

ReactDOM.render(
  <CommentList />,document.getElementById('container')
);

在这个栗子中，我们使用React.createClass方法建立了两个组件，我们可以看到，在组件CommentList中，嵌套了Comment：也就是说，CommentList是由多个Comment组成的。我们在CommentList中为Comment定义了一个属性：author。那么，在Comment组件中，就可以通过{this.props.author}读到这个属性，而通过{this.props.children}，则可以读到这个组件的子节点。

(待续)

原文地址：https://www.jb51.cc/react/304190.html

核心函数1:render

核心函数2:React.createClass

相关推荐