安装react(脚手架安装)
npm(cnpm、) install creat-react-app -g
创建新项目（使用脚手架创建一个新的单页应用，cd进项目里后用start跑起）
create-react-app my-app
cd my-app
npm start
react组件（组件总览）
引入Component组件（如何在页面组件中引入普通组件）
JSX语法（就是在js里套dom，dom里面套js）
渲染虚拟DOM
组件props
组件state
组件嵌套
组件生命周期
*引入Component组件
1、在头部引入Component组件，然后通过class方式继承Component，最后将组件导出，即可成为单独组件使用（跟java有点像接收类的mian方法，组件首字母需大写）
代码部分:
//引入Component
import {Component} from 'react';
//首字母均大写
class MyComponent extends Component{
consturtion(props){
super(props);
this.state={
isShow:true //isShow是否改变了状态
}
}
//react生命周期钩子函数
componentWillMount() {} //挂载前（16.3以后弃用了）
componentDidMount() {} //组件挂载完执行
componentWillReceiveProps() {} //组件更新数据时执行，props、state
shouldComponentUpdate() {} //组件需要更新执行
componentWillUpdate() {} //组件更新前
componentDidUpdate() {} //组件更新后
componentWillUnmount() {} //组件销毁前执行
//通过render函数可以将JSX语法渲染成真实dom
render() {
render (
<div>
<h1>我是组件</h1>
<p>{this.props.test}</p> //这里拿到值
<button onClick={()=>{
this.setState({ //点击后可修改state的值
isShow:!this.state.isShow, //将会通过isShow改变状态
})
}}>点我</button>
<p>{this.state.isShow}</p>
</div>
)
}
}
//首字母大写
class Parent extends Component{
return <MyComponent test="我是props"/> //嵌套了MyComponent通过父组件传进去
}
export default Parent;
*JSX语法
确实说白了就是html标签写到js中去，然后通过babel转译成react虚拟dom对象，然后再渲染，在标签内也可以嵌套js语句。想嵌套js语句的时候要用{}包裹起来。
*渲染虚拟dom
[if !supportLists]1、[endif]当修改值需要react重新渲染时，只会做修改处的局部渲染，diff算法（设计理念相当于异步）;
[if !supportLists]2、[endif]React先把JSX语法转成react对象，然后通过内部创建节点插入dom中;
*组件props
基础数据类型、引用数据类型。。。
子组件通过this.props这个对象来获取父组件传下的值+
*组件state
状态state（存放的是一些会改变的变量）
判断组件变化获取表单值等;修改state会引起recat重新渲染，也就是更新状态会引起组件刷新。
setState（）这个异步函数来设置state的值。
*组件的嵌套
组件复用
*组件的生命周期钩子函数
ESLint格式校验bug影响gitlab提交
函数组件与calss组件
import { Form, Input, Button, Checkbox } from 'antd';
const layout = { labelCol: { span: 8 }, wrapperCol: { span: 16 }, };
const tailLayout = { wrapperCol: { offset: 8, span: 16 }, };
const Demo = () => {
const onFinish = values => { console.log('Success:', values); };
const onFinishFailed = errorInfo => { console.log('Failed:', errorInfo); };
return (
<Form
{...layout}
name="basic" initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed} >
<Form.Item
label="Username"
name="username"
rules={[{
required: true,
message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout} name="remember" valuePropName="checked"> <Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item {...tailLayout}> <Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
ReactDOM.render(<Demo />, mountNode);
后端接口=>services中通过import中的get对接接口=>model空间里创建一个namespace的table数据空间，在state里初始化model状态，
Effects处理异步的业务逻辑，通过*x封装call查询接口并将结果通过put存入state并更新。
在reducer里，计算出新的state并更新，
注册一个updateDtat接口
在页面组件中调用接口方法
在页面组件中引用样式
enterButton是否有确认按钮，可设为按钮文字。该属性会与 addonAfter 冲突。
allowClear可以点击清除图标删除内容
onChange输入框内容变化时的回调
onSelect点击搜索图标、清除图标，或按下回车键时的回调
value输入框内容
size Input.Group 中所有的 Input 的大小，可选 large default small
在页面组件中的connect注解中注入“table”的model空间
网友评论