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:(
????????????????????????
????????????????????????????
????????????????????????????
????????????????????????????
????????????????????????
????????????????????)
????????????????})
???????????????
????????????}
????????????
????????}????????
????}
????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