ReactJs基础语法

HTML模板

<!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="test"></div>
    <script type="text/babel">
      // 我们写代码的地方
    </script>
  </body>
</html>

这是一个最简单的HTML的模板，首先我们看一下我们在这个代码中引入了3个库：react.js、react-dom.js、browser.min.js，其中react.js是React的核心库，react-dom.js提供了个DOM相关的功能，browser.min.js的作用是将JSX的语法转换为JavaScript的语法。因为React框架有独属于自己的JSX语法，这个语法通常是和JavaScript不兼容的，所以凡是JSX语法的地方都要加上script type="text/babel"标签。

ReactDOM.render()方法

ReactDOM.render()方法是React框架中最最最基础的方法，这个方法的作用是将模板转化为HTML的语法，然后插入到指定的DOM节点中。

<script type="text/babel">
   ReactDOM.render(
      <p>Hello, world!</p>,
      document.getElementById('test')
    );
</script>

上面的代码将一个<p>插入到test的节点中，其中document.getElementById('test')指定被插入的节点。

JSX的语法

我们上面就在将JSX语法，那么到底什么是JSX语法呢，其实我们可以简单的认为将HTML语言直接写在JavaScript语言之中，不加任何的引号，JSX语法允许HTML和JavaScript的混写。

var name =['kim' , 'tom' , 'tony'];
ReactDOM.render(
  <div>
  {
      name.map(function(name){
        return <div> hello {name}!</div>
      })
  }
  </div>,
  document.getElementById('test');
);

总结一下：遇到HTML标签，就使用HTML的规则解析；遇到代码块，使用{}包裹的代码，就用JavaScript规则进行解析。
当然JSX允许直接在模板中插入JavaScript变量，如果这个变量是一个数组的话，我们会展开这个数组的所有的成员。

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

会在结果中打出Hello world!，React is awesome两个标题。

组件

React框架允许我们将代码封装成组件，然后像插入普通的HTML标签一样，在网页中插入这个组件。

var HelloMessage = React.creatClass({
  render :function(){
    return <h1>hello {this.props.name}</h1>
  }
});
ReactDOM.render(
  <HelloMessage name ='kim' />
  document.getElement('test');
)

在上面的代码里面，HelloMessage 就是一个组件类，我们在模板中直接插入了<HelloMessage />就会自动的生成HelloMessage 的实例，在React中所有的组件都必须有自己的render方法，这个方法的目的是输出组件。
ps：组件的第一个字母必须大写，否则就会报错，而且一个组件类智能包含一个顶级标签，否则也会报错。举个栗子：

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

上面的代码就会报错，以为在一个组件类中包含了2个顶层标签，<p>和<h1>标签。组件的用法和原生的HTML标签相比没有任何的区别，可以加入任意的属性，上例中我们就在HelloMessage标签中加入了name属性。其中组件的属性可以在组件类的this.props对象上获取。在添加组件属性的时候，也需要注意class要写成className，for方法要写成htmlFor，因为class和for是JavaScript的保留字。this的指向：this指向的是组件类。

this.props.children

this.props对象的属性和组件的属性是一一对应的，但是还是有一个例外的，那就是this.props.children实行。他表示组件所有的子节点。

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

实现的结果是：

this.props.children的实现结果

ps：this.props.children的值可能存在三种情况，第一种就是当前的组件没有子节点，那么this.props.children返回的就是undefined，如果只有一个节点的话，那么返回的数据类型就是Object；如果有多个节点的话，返回的数据类型就是一个数组array，所以处理this.props.children的时候要格外的小心。
为了解决上述的问题,React框架为我们提供了一个React.Children的方法来处理this.props.children。我们可以根据React.Children.map来进行子节点的遍历。不用再担心React.Children的数据类型究竟是undefined还是object。

PropTypes

组件的属性在一定的意义上有一点类似于函数的参数，所以组件的属性值可以接受任意值，字符串、对象、数组、函数等等都可以。所以我们现在需要一种机制来验证别人传过来的值是否符合要求。组件的PropTypes属性，就可以用来检测组件的实例属性是否符合要求。

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

上面这段代码的意思就是在MyTitle组件有一个title的属性。PropTypes告诉React，这个title的属性是必须的，而且这个属性的数据类型是字符串，如果我们为title的属性设置为number类型的话，验证就无法通过，会在控制台输出一行错误信息。
还有一个关于属性的就是getDefaultProps方法可以用来设置组件属性的默认值。

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

ReactDOM.render(
  <MyTitle />,
  document.body
);

这个方法的意思就是在没有显示的对title的值就行定义的话，我们就直接使用默认值，也就是说上面的代码默认显示的是‘Hello World’。

获取真实的DOM节点

我们在写的时候讲组件当做真正的HTML的语法来写，但是其实组件并不是真正的DOM节点，而是存在于内存之后的一种数据机构，也就是虚拟DOM，只有将它插入到文档之后，它才会变成真正的DOM，在React设计的本意是，所有的DOM的变动是先发生在虚拟DOM中的，然后再将实际发生变动的部分，反映在真实的DOM中。
但是，有时候，我们需要从组件中获取真实的DOM，这个时候就要用到ref属性了。

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('test')
);

组件MyComponent的子节点有一个文本输入框，来得到用户的输入，现在这个情况就是必须获取真实的DOM节点，虚拟DOM对于用户来说是拿不到的，所以我们为了可以获取到这个值，文本框必须有一个ref属性，然后在使用this.refs.[refName]就可以返回这个真实DOM节点。由于this.refs.[refName]属性获取的是真正的DOM，所以一定要等到虚拟的DOM插入文档以后，才可以使用这个属性，要不然就会报错。在上面代码中指定了click回调函数，确保了DOM获取发生在Click之后，才会读取this.refs.[refName]属性。重点就是一定要在虚拟DOM插入到文档之后再进行操作。

this.state

组件是无法避免的要与用户进行互动，我们可以将组件看做是一个状态机，一开始有一个初始状态，然后与用户进行互动，不断的导致状态的改变，从而触发重新的渲染UI。

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('test')
);

解释一下上面的代码：LikeButton 这个组件，他有一个getInitialState方法定义了初始状态，这也是一个对象，这个对象可以通过this.state属性读取。当用户点击组件的时候，状态发生了改变，this.setState方法用来进行状态的修改。每一次状态发生改变，就会自动的调用this.render方法，再次进行组件的渲染。
this.props表示哪些属性一旦被定义，就不能被修改；而this.state会随着用户的互动而大声变化的特性。

表单

用户在填写表单的时候，属于用户和组件之间的互动，所以不能用this.props来进行读取。

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

ReactDOM.render(<Input/>, document.body);

文本框中的值，不能用this.props.value来进行读取，而要定义一个onchange事件的回调函数。通过 event.target.value来读取用户输入的值。

组件的生命周期

组件的声明周期主要分为3个状态：
Mounting:这个是已经插入的DOM
Updating:正在被重新渲染
Unmounting:已移除的真实DOM
React 为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共计五种处理函数。

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)
  • componentWillUnmount()

React 还提供两种特殊状态的处理函数。

  • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
  • shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

did函数在进入状态之后调用,我们在这里调用了componentDidMount的方法，也就是在hello组件加载之后，然后在componentDidMount方法中设置一个定时器，这个定时器的目的是每隔100毫秒，但是在透明图小于一定值的话，就会重新的渲染。
我们注意到我们对样式的定义是style={{opacity: this.state.opacity}}，而不是style="opacity:{this.state.opacity};",因为react的组件的样式实质上是一个对象，所以第一重大括号表示的是js的语法，第二重大括号表示的是对象。

Ajax

对于组件的数据来源，通常是通过Ajax请求在服务器获取的，我们依旧可以通过componentDidMount方法来设置Ajax请求，等到请求成功的时候，再使用this.setState方法重新渲染UI。

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.body
);

上面的代码的实现是使用jquery来完成Ajax的请求，这也就很方便的说明了。react本身是没有任何的依赖的，我们可以不使用jquery而是使用其他的库。
我们现在比较经常使用的是使用promise来进行操作，而且我们通过查看promise的状态来返回了不同的信息。

var RepoList = React.createClass({
  getInitialState: function() {
    return { loading: true, error: null, data: null};
  },

  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },

  render: function() {
    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo) {
        return (
          <li>
            <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
          </li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});

参考：React 入门实例教程-阮一峰

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,163评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,301评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,089评论 0赞 352
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,093评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,110评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,079评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,005评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,840评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,278评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,394评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,980评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2赞 352