React入门以及JSX语法理解

本周主要利用React以及JSX语法外加antd UI组件实现一个增加删除数据的页面,一开始上手这个东西挺难的,因为之前没有接触过React框架这些东西,一开始觉得有点无从下手。不过经过一周的努力和适应,差不多完成了整个需求,下来做一个总结。

React框架

React有一点与Vue是相似的,都是通过数据来渲染页面的,也就是说改变数据就可以改变页面的呈现。但不同的是,Vue直接改变数据,而 React则是通过改变状态来触发重新渲染的。
比如下面一个例子:

<div id="example"></div>
<script type="text/babel">
    ReactDOM.render(
        <h1>Hello, Hellen</h1>,
        document.getElementById('example')
    )
</script>

注意,在这之前,要引入react的CDN库,可以自行在网上找。

另一种方法,就是利用react-create-app快速构建React开发环境,可以参考React 教程
来看一个简单的例子:

//在最前面先把需要的模块import进来后面才能用。
import React, { Component } from 'react';
import './App.css';

class App extends Component {
//上面属于ES6的语法,即继承于React 组件Component的一个类App,可以认为它也是一个组件。最后export暴露出接口之后,外面可以通过<App />这种结构来使用。
  //每个类默认有一个constructor构造器
  //这里还需要注意,React是通过改变状态来驱动数据变化,从而触发render函数重新渲染的。因此,一开始可以定义一个状态
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    }
  }
  //当点击事件触发后,通过this.setState({})具体改变状态的某个值,从而使得整个状态改变,触发render函数重新渲染。
  clickFunc = () => {
    let count = this.state.count;
    count = count + 1;
    this.setState({
      count : count
    });
    //但是,打印出当前状态时,却发现状态中的count总会滞后一个数。
    //原因其实是因为this.setState()函数是异步的,他不会立即执行,所以此时获取的count还是原来状态中的count。
    console.log(this.state.count);
  }

  render() {
    const data = this.state.count;
    return (
    //JSX 语法,通俗点讲,就是在JS代码中嵌入了HTML代码,并且是有效的。需要注意的是,变量都需要用{}来扩起来;
    //另一方面,要添加样式时,类名需要写成classname。
      <div className="box" onClick={this.clickFunc}>
      {data}
    </div>
    )

  }
}

export default App;

JSX语法

JSX语法其实就相当于是HTML和JS的混合,JS里面可以融入HTML代码,在HTML代码里也可以融入JS代码,但是要用{ }括起来。
为什么JSX语法可以起作用呢?你需要先装Babel工具,他会把JSX代码转换成JS语法。
上面的例子中

return (
//JSX 语法,通俗点讲,就是在HTML代码中嵌入了JS代码,并且是有效的。需要注意的是,变量都需要用{}来扩起来;
//另一方面,要添加样式时,类名需要写成className。
    <div className="box" onClick={this.clickFunc}>
        {data}
    </div>
)

上面部分就是JSX语法,注意,JSX语法必须写在script标签里面,并且type要设置为text/babel

JSX 语法主要的好处就是用起来非常简洁方便,而且性能也要好一些,因为JSX实际上是要转成原生JS的,一般是有工具的,比如Babel等等,转的过程中会对JS进行一些优化。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值