ReactJs快速入门

ReactJs介绍:

官方一句很简单的话，道出了什么是ReactJS，就是，一个用于构建用户界面的JavaScript框架，是Facebook开发的一款的JS框架。ReactJS把复杂的页面，拆分成一个个的组件，将这些组件一个个的拼装起来，就会呈现多样的页面。

环境准备

安装UmiJS

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。你可以将它简单的理解为一个专注性能的类 next.js 前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。

1.安装Node.js

2.安装yarn

#接下来，开始安装yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些

#可以把yarn看做了优化了的npm

npm i yarn tyarn -g #-g 是指全局安装

tyarn -v #进行测试，如果能够正常输出版本信息则说明安装成功了

#如果安装失败，是由于将yarn添加到环境变量中导致，参见

http://www.easysb.cn/index.php/2017/06/04/11/

3.

#下面开始安装umi

tyarn global add umi

 

创建HelloWorld工程

1.初始化项目

初始化完成

 

 

 在命令输入如下命令添加umi依赖：

 

创建config全局配置文件

 

 

在umi中，约定的目录结构如下：

 

第二步，创建HelloWorld.js页面文件

在umi中，约定存放页面代码的文件夹是在src/pages，可以通过singular:false来设置单数的命名方式，我们采用默认即可。

在HelloWorld.js文件中输入如下内容：

 

部署项目

umi dev

 

 

 

 

JSX语法

JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。

JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。

使用JSX语法，需要2点注意：

• 标签必须是闭合的
• 只有一个根元素

 

在JSX语法中，如果想要在html标签中插入js脚本，需要通过{}插入js脚本。

 

组件

组件是React中最重要也是最核心的概念，一个网页，可以被拆分成一个个的组件， 像这样：的概念，一个网页，可以被拆分成一个个的组件,列如

 

在React中，这样定义一个组件：

import React from 'react';//第一步，导入React

class HelloWorld extends React.Component{//第二步，编写类并且继承 React.Component
    render(){//第三步,重写render渲染方法
        return <div>HelloWorld_class!</div>
    }
}
//第四部,导出该类
export default HelloWorld;

 

效果

导入自定义组件

import React from 'react'
import HelloWorld from './HelloWorld'

class Show extends React.Component{

    render(){
        return <div>111<HelloWorld/></div>;//使用HelloWorld组建
    }
}
export default Show;

效果图

 

组件参数

组件是可以传递参数的，有2种方式传递，分别是属性和标签包裹的内容传递，具体使用如下：

import React from 'react'
import HelloWorld from './HelloWorld'

class Show extends React.Component{

    render(){
        return <HelloWorld name="lisi">hubei</HelloWorld>;//使用HelloWorld组建
    }
}
export default Show;

其中，name="zhangsan"就是属性传递，shanghai就是标签包裹的内容传递。容传递。

接收数据对应的也是2种方法：

属性：this.props.name 接收；

标签内容：this.props.children 接收；

import React from 'react';//第一步，导入React

class HelloWorld extends React.Component{//第二步，编写类并且继承 React.Component
    render(){//第三步,重写render渲染方法
        return <div>HelloWorld_class! name={this.props.name},address=
            {this.props.children}</div>
    }
}
//第四部,导出该类
export default HelloWorld;

效果图如下:

组件的状态

每一个组件都有一个状态，其保存在this.state中，当状态值发生变化时，React框架会自动调用render()方法，重新渲染页面。

其中，要注意两点：

一： this.state值的设置要在构造参数中完成；

二：要修改this.state的值，需要调用this.setState()完成，不能直接对this.state进行修改；

下面通过一个案例进行演示，这个案例将实现：通过点击按钮，不断的更新this.state，从而反应到页面中。

import React from 'react'

class List extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            dataList:[1,2,3]
        }
    }

    render(){

        return (
            <div>
                <ul>
                    {
                        this.state.dataList.map((value,index) => {
                          return <li key={index}>{value}</li>
                        })
                    }
                </ul>



                <button onClick={()=>{
                    let arr =  [...this.state.dataList,this.state.dataList[this.state.dataList.length-1]+1];
                    this.setState({
                        dataList:arr
                    });
                }}
                >添加</button>
            </div>
        )

    }


}
export default List;

初始状态

 

点击添加按钮

生命周期

组件的运行过程中，存在不同的阶段。React 为这些阶段提供了钩子方法，允许开发者自定义每个阶段自动执行的函数。这些方法统称为生命周期方法（lifecycle methods）。