react 学习

时间:2020-04-28 18:25:11   收藏:0   阅读:78

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

生命周期的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"?}]
????]
??}

原文:https://www.cnblogs.com/teahouse/p/12795564.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!