react从0开发的完整过程

              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'sass-loader'
              ).concat({
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        // 这里按照你的文件路径填写
                        path.resolve(__dirname, './../src/styles/main.scss')
                    ]
                }
              }),
              sideEffects: true,
            },

npm install antd --save
依赖按需加载包
npm install babel-plugin-import --save-dev

["import",{libraryName: "antd", style: 'css'} ]

以上是严格模式，但是在开发的时候可以把严格模式先去掉

ul的地址： 1x.ant.design/components/…

使用箭头函数，来给dom绑定事件

因为使用第三方ul组件把本地的设置的样式给覆盖掉了，所以把本地写的代码加大权重，!important

登录注册的实现：

1 实现一个登录的组件 以及一个注册的组件 2 在index.js中，首先调用登录组件，在state中定义一个变量

父子组件的传值：

1 父组件中定义一个变量 在子组件上传递一个名称比如： aaa=this.switchFun, 然后定义switchFun这个函数，并且有返回值

2 子组件中通过点击一个事件的方法，通过定义这个方法，然后在this.props.aaaa('register') 通过父组件定义的aaaa 子组件通过this.props.aaaa给进行传值

3 父组件中通过aaaa=this.switchFun 这个switchFun接收值 注意点：onClick是C大写

1 是 {} 自定义验证中es6的解构

2 不仅仅getFileValue不仅仅可以获取本字段的值还可以获取其他的 比如在验证重复输入的密码是否正确。

对校验做一个统一的处理：如果有一处改变的话，那么其他相关的地方也会相应的改变

axios的配置三步骤：

调用axios：

使用配置好的接口：引入api文件中相应的接口

如果需要改动就比较麻烦，需要每个页面都需要去改一遍；

验证码的整个过程：

react中没有双向数据绑定， 那么在react中的实现是：

1 在state中定义变量

2 在render 中将变量解构 比如 const {userName} = this.state

3 在相应的dom节点上，使用value={userName} 然后监听事件 或者也是直接可以使用value={this.state.userName}

4 在监听的事件方法中改变state中的userName的值 通过 this.setState({ userName: value })

发送验证码按钮禁用状态： 定义一个变量：

通过自定义来验证邮箱或者通过弹框 来提示邮箱验证不通过。

验证码的操作：

1 定义loading 和按钮的问题的变量

2 将变量通过{}加到相应的dom节点中去 以及按钮的loading 给按钮添加点击事件

3 点击- 改变loading的值为true 改变按钮的文字

4 发送接口请求 请求成功 倒计时 请求失败 改变loading为false 改变按钮文字为发送失败

倒计时的实现：

优化： 防止按钮被不断的点击

设置一个开发的变量 如果符合条件就触发 如果不符合就false

1 点击事件的时候 如果为true 就继续 如果为false

则 if(!this.state.flag) {return false} 然后改变 flag只为false， 然后调用接口（为了防止不断点击的时候，值为false 的时候则不再点击）

如果接口调用失败 改变flag的值为true this.setState({flag: true})

在倒计时为0的时候 也是需要改为true

组件：

生命周期：

组件提取：

**注意点： 如果看原型 如果有重复的功能 那么一开始就要规划好 **

1 将相关的代码都提取到一个组件中 如果和父组件有相关的联动 通过父子组件直接传值 以及子组件接收值来进行联动

父组件中给子组件传值：

子组件中接收值 并且父组件中值改变的时候 重新接收的方法 接收初始化的值 这个值是第一次父组件中传的值

如果父组件中的值改变的时候 子组件接收值

componentWillReceiveProps({username}) ==> 中的{username}是es6中的解构 实际相当于

component Will Receive Props(value){ username = value.username}

销毁组件：

注册页面的注意点是：

输入密码和确认密码的校验：

密码加密：

import CryptoJs from 'crypto-js';
// md5加密
const pwd = CryptoJs.MD5(password).toString();

// SHA1
let pwd = CryptoJS.SHA1(password).toString()；

// AES加密 第一个参数为需要加密的内容，第二个参数为秘钥
 const secretKey = '_zefdsuh123';
let pwd = CryptoJS.AES.encrypt(password, secretKey).toString();

使用：加密是不可逆的

import CryptoJs from 'crypto-js';

        const requestData = {
            username: this.state.username,
            password: CryptoJs.MD5(this.state.password).toString(),
            code: this.state.code
        }
        Register(requestData).then(response => {
            const data = response.data;
            message.success(data.message)
            if(data.resCode === 0) {
                this.toogleForm();
            }
        }).catch(error => {

        })
    };