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的值,然后自动重新渲染组件

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值