react.js从入门到精通(二)——变量的定义和初始化、事件的使用
文章 1951 0 0 0
发布时间:2019年08月26日

概述

web端三大框架react、vue和angular,本篇教程介绍react的从入门到精通。

四、变量的定义和初始化

1、使用在构造函数中创建

代码如下:

import React, {Component} from 'react';
import logo from '../logo.svg';
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:"react是优秀的前端三大框架之一"
    };
  }
  render(){
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            准备起步
          </a>
         <span>{this.state.data}</span>
        </header>
      </div>
    );
  }
}
export default Home;

效果如下:

react.js从入门到精通(二)——变量的定义和初始化、事件的使用

从上面的代码和效果我们可以看出,react.js的变量可以定义在state这个json对象中,接着把state这个json对象绑定在this上。
调用方式是:在dom树中需要用到的地方以{this.state.}方式进行使用。

2、在render中创建

代码如下:

import React, {Component} from 'react';
import logo from '../logo.svg';
class Home extends Component {
  render(){
    let datatwo = "render:react是优秀的前端三大框架之一"
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="https://reactjs.org&quot;
            target="_blank"
            rel="noopener noreferrer"
          >
            准备起步
          </a>
         <span>{datatwo}</span>
        </header>
      </div>
    );
  }
}
export default Home;

效果如下:

react.js从入门到精通(二)——变量的定义和初始化、事件的使用

效果与上面一样。

五、事件的使用

web前端是通过事件去操作界面的,所以在开发的过程中会用到大量的事件,下面以点击事件为例。

1、事件的定义和使用

代码如下:

import React, {Component} from 'react';
import logo from '../logo.svg';
class Demo extends Component {
  render(){
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="#"
            rel="noopener noreferrer"
            onClick={()=>this.click()}
          >
           点击准备起步
          </a>
        </header>
      </div>
    );
  }
   click=()=>{
    alert("装载完毕!准备起飞");
  };
}
export default Demo;

效果如下:

react.js从入门到精通(二)——变量的定义和初始化、事件的使用

2、方法中参数的引入

代码如下:

import React, {Component} from 'react';
import logo from '../logo.svg';
class Demo extends Component {
  render(){
    let data = "装载完毕!准备起飞!我是101"
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="#"
            rel="noopener noreferrer"
            onClick={()=>this.click(data)}
          >
           点击准备起步
          </a>
        </header>
      </div>
    );
  }
  click=(data)=>{
    alert(data);
  };
}
export default Demo;

效果如下:

react.js从入门到精通(二)——变量的定义和初始化、事件的使用

3、通过事件来操作变量值的变化

代码如下:

import React, {Component} from 'react';
import logo from '../logo.svg';
class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:"render:react是优秀的前端三大框架之一"
    };
  }
  render(){
    let data = "装载完毕!准备起飞!我是101"
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="#"
            rel="noopener noreferrer"
            onClick={()=>this.click(this.state.data)}
          >
           点击准备起步==
        {this.state.data}
          </a>
        </header>
      </div>
    );
  }
   click=(data)=>{
    this.setState({
      data:"你说的对!!!"
    });
  };
}
export default Demo;

效果如下:

react.js从入门到精通(二)——变量的定义和初始化、事件的使用

react.js从入门到精通(二)——变量的定义和初始化、事件的使用

this.setState()作用是将state中的数据进行修改,同时刷新界面,修改this.state.中的对应变量的值。

如果你对上面的一无所知的话可以访问追梦猪git下载demo实现快捷开发,省掉安装的步骤

追梦猪react项目demo实例(https://github.com/jiawenguang/React-demo.git)

可以通过git clone方式下载项目结构。

评论专区
Q群
Q群
Q群
反馈
纠错