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?(
????????????

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

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"?}]
????]
??}

react 学习

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