- 1.使用create-react-app创建基于react脚手架应用（最好精简一下脚手架）
- 2.引入antd，完成按需引入，自定义主题
- 3.login静态页面（不使用atnd的任何组件）
- 4.login的Form表单（不加校验，只是使用静态的Form）
- 5.login的Form表单（给用户名加校验，声明式验证）
- 6.login的Form表单（给密码加校验，自定义验证）
- 7.理解好Form.create()(Login)
- 8.高阶组件、高阶函数
- 在antd4.X中,form表单自动（全部）进行校验。
- 在antd3.x中，当form表单输入的不满足rule，得自己调用方法去全部进行判断
- ex： 在ant3.x中，利用rule对用户名，密码分别进行校验，当输入的条件不满足时，点击登录也会触发登录的操作函数；但是在ant4.x中，不满足条件时，点击登录按钮也不会触发登录函数 antd4.x中，默认form提交方法位ajax，不会触发form提交后造成网页自动刷新功能。
- react-redux
- redux-thunk
##在admin中,点击不同的组件,header显示的内容不一样:
当点击不同的组件时,Link-Route的方法,会自动根据Route的cpmponent参数进行相对应组件的匹配匹配
当匹配完成后,URL发生变化,在Header中 标题的变化时根据URL来进行变化的,URL存储在prop中,当资源发生变化时,组件会重新加载
在Header中,所在页面的title根据用户的点击不同呈现出不同的字段,但是由于在Header中,有时间的变化,每隔一秒钟就会重新加载Header组件,造成资源浪费 所以将变化首页字段的方法交给redux去统一管理,不会造成自己刷新,但是当用户进行刷新的时候,redux中的状态会消失,此时借助conponentWillDid生命钩子进行重新渲染主页字段
在商品分类这个jsx中，可以利用React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例； 这样的做法是将Form组件实例化，之后可以调用interfance相关方法去进行表单的值的获取，以及表单的清空，在antd3.x中，可以利用form.create方法将组件实例化，在andt4.x中，可以利用ref属性。可以较好的获得到form 组件。
在发送请求向服务器添加数据时，可以根据服务器返回的数据再在页面上进行相对应的操作，比如：当数据库中有此数据时，返回的stauts：1，
此时在前端接收到后，可以根据stauts的不同做出不同的反应。
编写category组件时，可以根据login组件的思路来，有些组件可以进行复用；新建数据和修改数据的弹框可以利用过一个组件，对值进行过滤操作就可以满足两者不同的要求。
当state中的数据为数组或者时对象时，不可直接获得当前的数据，得进行转换，如将state中的数组数据取出来 let aaa = [...this.state.arr2],可以使用三点运算法。
在state中的数据发生变化时，组件会重新进行渲染，这样可以在添加数据后可以直观的看到刚才添加进去的数据
Modal组件自带的visible属性只能控制Modal的显示与否，无法真正销毁Modal。要想真正销毁Modal我们可以不控制Modal的visible属性，转而控制Modal这个组件的有无。
当modal组件根据state中的值来进行展示与隐藏时,该组件本身没有被销毁,该组件中的子组件中的数据,如form组件中的form.item的初始化数据,只有在组件初始化时才会被重新获取初始值
错误情况:
当未使用destory时,第一次点开的数据时正确的,当第二次点击时,该组件由于未被销毁,currentValue中的值还是为上次的值,当点击取消按钮中,此时的currentvalue
的值已经发生了变化,当第二次点击item时,该组件中的数据极为上次存入的数据.
正确情况:
当modal组件visible属性为false时,进行该组件的销毁,该组件的子组件也会进行销毁,不管点击item多少次,form.item中的initvale方法总会在再次调用,(是初始化的时候,而不是组件关闭的时候)
此时state中的值早已经在组件显示的时候进行了更改操作.这时显示的数据才是对的.
###修改后的处理 前端向服务器发送修改的请求后,服务器未返回相对应的数据,得前端自己去拼接数据,在表单回显时已经可以拿到数据了,在这里将数据存入state中,供修改方法的使用.待服务器返回成功后,重新向服务器获取表单请求
###分页 1.前端分页： 一次性返回所有数据，由前端人员进行数据的切割，整理，划分数据 当数据量足够大时，会产生页面卡顿或浏览器“假死” 2.后端分页： 返回的数据是一部分数据，需要请求时指明，你要哪条数据，交由服务器去继续数据切割 后台需要明确：每页显示多少条数据，你要哪一页数据，同时后台会返回数据一共有多少个，用户交由前端显示
###搜索和初始化方法 可以将搜索和初始化方法写在一个方法中,这样的好处是,处理数据的是同一个受控表单 这两个方法的不同之处只在于发送请求的地址不同,对于数据的处理是相同的,可以利用同一个组件去渲染数据,在此,同一个组件,可以减少代码的重复性
###精确匹配 {/精确匹配,在大路由中有小路由时使用/} 当同一个页面需要参数或不需要参数时,可以利用严格匹配继续路由筛选,将不带参数的设置为严格匹配,这样,当由参数时,路由组件会跳过该路由, 去寻找带参数的路由去进行匹配
###左侧选中栏与右侧的内容不匹配,以及右侧头部信息 由于左侧的选中栏中的数据是根据地址栏来进行匹配的,由redux继续保存数据,当页面进行刷新时,该redux中的数据清空了,当再次调用存值方法时, 地址栏的最后一份已经发生了变化,获取不到想要的数据了.所以左侧与头部的数据无法进行正常显示. 解决方法: 在地址栏进行关键字判断,,如果有该关键字,则进行数据的存储,如果没有则进行地址栏最后的取值split(),当有多级菜单时,也是采用此方法进行菜单选中, 或者是构建nav栏多级目录
###富文本编辑器展示,在react中 function createMarkup() { return {__html: 'First · Second'}; }
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
用此方法可以将数据选染成带有html结构的数据
商品分类需要将数据交由redux保管,在商品详细那需要依靠商品分类名id去匹配相关字段
##this.setstate() 在react高版本中,this.setstate()函数时异步的,在早期的版本中,此函数在生命周期钩子中才是异步的. 即:在更新状态后,不会立即生效
##12.28 ###setFildsValue坑 在antd4.x中,不能直接给Item设置初始值,设置之后不能利用setstate去重新赋值,(官方文档有写) 在自己操作中,利用ref属性,将组件勾出来进行赋值操作,form.setFieldsValue() 利用此方法给item设置值 在设置的时候,记得要将form表单中的name属性设置完(不知道为啥,我只设置了一个回显不出来,全部添加后可以正常显示) 富文本编辑器按照官方文档进行操作 在照片墙中: 在存入与回显的时候,也是利用钩子去操作相关数据.
##modal 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 destroyOnClose。 和 Form 一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要设置
。