react 学习

生命周期
生命周期即是组件从实例化到渲染到最终从页面中销毁，整个过程就是生命周期，在这生命周期中，我们有许多可以调用的事件，也俗称为钩子函数

生命周期的3个状态：
Mounting:将组件插入到DOM中
Updating:将数据更新到DOM中
Unmounting:将组件移除DOM中

生命周期中的钩子函数（方法，事件）

CompontWillMount :组件将要渲染，AJAX，添加动画前的类
CompontDidMount:组件渲染完毕,添加动画
compontWillReceiveProps:组件将要接受props数据，查看接收props的数据什么
ShouldComponentUpdate：组件接收到新的state或者props,判断是否更新。返回布尔值
CompontWillUpdate:组件将要更新
ComponentDidUpdate:组件已经更新
ComponentwillUnmount:组件将要卸载

表单输入
注意：必须绑定value和onChange事件

import React from 'react';

class SearchCom extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            value:"",
            result:null
        }
    }

render(){
        return (
            

                
                

                    

查询结果：

                    

                        {this.state.result}
                    

                

            

        )
    }
    searchEvent=(e)=>{
        
        if(e.keyCode=13){
            console.log(e.keyCode)//当keycode是回车的时候在进行执行查询
            console.log(e.target.value)
            console.log(this.props.provincesObj[e.target.value])
            if(this.props.provincesObj[e.target.value]=undefined){
                this.setState({
                    result:

输入错误，不是省份。请输入正确的省份

                })
               
            }else{
                this.setState({
                    result:(
                        

                            

确诊人数：{this.props.provincesObj[e.target.value].confirm}

                            

死亡人数：{this.props.provincesObj[e.target.value].dead}

                            

治愈人数：{this.props.provincesObj[e.target.value].heal}

                        

                    )
                })
               
            }
            
        }        
    }
    changeEvent=(e)=>{
        this.setState({
            value:e.target.value
        })
    }
}

export default SearchCom

Ajax+React+Express+axios案例

Ant 蚂蚁框架

安装使用：
cnpm install antd-mobile --save

全部导入样式和js：

import { Button } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

按需要导入：

1、安装插件
cnpm install babel-plugin-import --save

2、配置
npm命令
npm run eject

Packjson
 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import", { "libraryName": "antd-mobile", "style": "css" }]
    ]
  }