Demo中学习React-入门学习

前端之家收集整理的这篇文章主要介绍了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的值,然后自动重新渲染组件

原文链接:https://www.f2er.com/react/306049.html

猜你在找的React相关文章