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(
<p>{message}</p>   //大括号引入js变量
);
}
}
//导出Demo1组件
export default Demo1;

渲染组件部分：

import React from 'react';
import ReactDOM from 'react-dom';
import Demo1 from './App.jsx';
//获取当前时间
var start = new Date().getTime();
setInterval(function() {
ReactDOM.render(
//使用组件，并定义了elapsed属性
  <Demo1 elapsed={new Date().getTime() - start} />,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 (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
});
export default Demo2;

渲染组件部分：

import Demo2 from './App.jsx';
ReactDOM.render(
  <Demo2 />,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  <div>
            <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
            <h4>{this.props.myDataProp}</h4>
            </div>;
}
});
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 <div>
            <Content myDataProp = {value} 
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
});
export default Demo3;

渲染组件部分：

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

总结：

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

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

Demo中学习React－入门学习

相关推荐