Demo中学习React－入门学习

在搭建的环境基础上进行Demo实现。其中App.jsx用来定义组件，注意一个文件导出一个组件；main.js用来进行组件的渲染。最后利用webpack将源代码构建为index.js并引入index.html页面。

Demo1：界面上显示秒表效果，实时更新

定义组件部分：

import React from 'react';
//定义组件
class Demo1 extends React.Component{
render(){
var elapsed = Math.round(this.props.elapsed  / 100);//获取组件属性值this.props.elapsed
    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );//计算seconds
    //使用seconds加入组件的message内容
    var message ='React has been successfully running for ' + seconds + ' seconds.';
//返回组件
return(

{message}

渲染组件部分：

import React from 'react';
import ReactDOM from 'react-dom';
import Demo1 from './App.jsx';
//获取当前时间
var start = new Date().getTime();
setInterval(function() {
ReactDOM.render(
//使用组件，并定义了elapsed属性
  ,
  document.getElementById('app')
);
}, 50);

总结：

1.使用class … extends React.Component的方法进行组件的定义。

2.通过this.props.attr获取定义的组件标签中的属性值

3.在定义组件时，使用{}调用javascript变量

4.ReactDom.render()方法渲染组件，这里使用setInterval每隔50ms就进行一次组件渲染

5.该例中，每次渲染都会更新elapsed值，组件获取新的elapsed值并进行处理，最后作为内容构建组件

Demo2：点击组件，会刷新已点击次数

定义组件部分：

var Demo2 = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (

点我！点击次数为: {this.state.clickCount}

渲染组件部分：

import Demo2 from './App.jsx';
ReactDOM.render(
  ,
  document.getElementById('app')
);

总结：

1.getInitialState方法用来初始化state的内容，返回的是一个对象，比如这里初始化了clickCount变量为0，就可以通过this.state.clickCount获取

2.setState方法用来改变state对象的值，比如例子中就修改了this.state.clickCount值将其加1

3.handleClick方法定义了一个点击事件，在下面的组件中通过onClick属性进行调用，这样每次点击都会触发handleClick中的方法

Demo3：实现类似AngularJS中双向数据绑定的功能

定义组件部分

var Content = React.createClass({
render: function(){
return  {this.props.myDataProp}
; } }); var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello Martin’}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { var value = this.state.value; return; } }); export default Demo3;

渲染组件部分：

import Demo3 from './App.jsx';
ReactDOM.render(
  ,
  document.getElementById('app')
);

总结：

1.这里使用父组件和子组件。其中HelloMessage是父组件，Content是子组件，HelloMessage组件可以直接使用之前已经定义好的Content子组件

2.为子组件的input标签onChange事件绑定handleChange方法，这样每次input发生变化时都会通过setState修改value的值，然后自动重新渲染组件