react-day02

（1）React基础

　　目前，我们已经利用create-react-app脚手架搭建好了项目，启动和操作项目的相关命令在项目说明文件package.json的scripts字段里。如下所示

　　

　　关于修改项目启动端口号及其他配置详解 create-react-app 脚本搭建工程，修改默认端口号.和React运行npm run eject命令报git错误.和React自定义修改脚手架配置npm run eject.

　　执行npm run eject命令喷射配置文件后scripts字段改动如下，注意：该过程不可逆。

　　

 　　另外，还有测试文件App.test.js

　　

 　　主要用于后期测试：测试可以分为技术编码测试和人工界面测试，在开发阶段不用，所以删除即可。

　　关于ServiceWorker.js的作用，需要配合manifest.json去解释，详见React脚手架工程化项目里ServiceWorker.js文件作用.

　　接下来开始编写组件内容。如下所示

　　1、导出组件的两种写法

　　　　先定义后导出

　　　　

 　　　　定义的时候直接导出

　　　　

 　　2、Component方法与React.Component

　　　　除了使用React.Component外，还可以直接引入React下的Component方法，如下所示

　　　　

　　3、JSX语法糖

　　　　简单理解：JSX就是JS的新的语法糖，同理，微软推出的TypeScript也是JS的新语法糖，即两者最终都是会被编译为JS，然后运行在浏览器里。

　　4、闭合标签

　　　　JSX是由JS和XML组成的，而XML可以理解为严谨的HTML，XML里要求每个标签都必须闭合。这就是和平时开发的区别

　　　　

 　　　　平时HTML开发编写代码可以不加/闭合，但JSX符合XML规范，要求所有标签必须闭合

　　　　

 　　5、require引入图片

　　　　

 　　　　

 　　　　或者直接给单标签加个闭合标签

　　　　

 　　6、组件文件名后缀

　　　　可以是JS，也可以是JSX，都可以进行开发

　　　　

　　7、组件导出后在根组件使用

　　　　首先进行导出

　　　　

　　　　然后在根组件调用

　　　　

 　　8、props组件数据传递

　　　　首先父组件传值

　　　　

 　　　　然后子组件接收 并渲染展示

　　　　

 　　　　

　　9、Props are Read-Only只读

　　　　

 

 　　10、Props数据类型验证

注意：React.PropTypes自从React v15.5起，它已经转移到另一个包中。请改为使用该prop-types库。

　　　　

 　　　　这里限制数据类型为number数字，因为传递的是字符串，所以控制台会有如下报错，但仍然正常渲染

　　　　

　　　　也可以先导出，后验证，如下所示

　　　　

　　　　例如：改为string类型，然后传入number数字

　　　　

 　　　　

 　　　　此时提示如下

　　　　　　　　

注意：
    PropTypes导出一系列验证器，这些验证器可用于确保您收到的数据有效。在此示例中，我们使用PropTypes.string。为道具提供无效值时，
　　JavaScript控制台中将显示警告。出于性能原因，propTypes仅在开发模式下检查。

　　　　作用：

协同开发时，可能用到别人的组件，所以需要进行数据类型验证

　　11、Props设置默认值defaultProps

　　　　

 　　　　

 　　　　如果在调用组件时，即父组件处，没有传入参数时，则会使用默认值

　　　　

 　　12、Props必填项验证

　　　　

 　　　　如果没有设置默认值，且调用时没有传入props的话控制台提示如下

　　　　

　　　　此时即验证了类型，又限制了必填，所以之前的类型验证可以去掉

　　　　

 　　13、必选项一般要求客户自己传，所以不会设置默认值；而非必选项可以设置部分默认值　

　　14、小结：Props作用：增强程序健壮性，更加完善合理

　　

 　　

（2）State初始化状态和生命周期

　　1、state编写位置

 　　　　对比ES5的写法，V16版本以后的ES6的Class继承写法，将state编写位置和方式发生较大改动，对比如下

　　　　

 　　　　

 

 　　　　

 

（3）form表单与ref

　　首先编写表单测试组件并引入，如下所示

 　　

　　注意：如果没有绑定事件，则此时控制台会报错，如下所示

　　

　　翻译如下：

因为没有设置onChange事件处理函数，所以将呈现一个只读字段。 如果该字段是可变的，则使用`defaultValue`。 否则，设置“ onChange”或“ readOnly”。

 　　

 　　1、接下来开始需求：点击按钮时获取表单输入内容---受控组件

受React控制的组件就叫受控组件
因为React尽量避免直接操作DOM，进而获取表单内容，所以这里我们可以使用受控组件来操作

　　所以受控组件作用，简单理解为

方便的处理表单的提交， 同时还可以访问用户填写的表单数据

　　步骤：

1、state 成为“唯一数据源”
2、绑定事件处理函数，根据用户输入进行处罚，并通过使用 setState()来更新，实现可变状态（mutable state）

　　2、编写XML模板代码

　　3、设置state初始化数据

　　4、表单绑定事件→constructor构造器内部改动事件this指向→编写事件对应处理方法

　　

 　　

 　　

 　　此时便可以正常输入和改动，之后表单提交时阻止默认事件，获取表单内容即可

　　

 

 　　测试如下：

　　

 

 　　完整代码如下

import React,{Component} from 'react'

class FormDemo extends Component {
    constructor(props){
        super(props)
        this.state = {
            username:'',
            password:''
        }
        this.changeName = this.changeName.bind(this)
        this.changePwd = this.changePwd.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    changeName(event){
        this.setState({username: event.target.value});
    }
    changePwd(event){
        this.setState({password: event.target.value});
    }
    handleSubmit(event){
        event.preventDefault()
        console.log(this.state)
    }
    render(){
        const form_style = {
            padding:20,border:'1px solid #333'
        }
        return (
            <form style={form_style} onSubmit={this.handleSubmit}>
                <div>
                    <label htmlFor="username">用户名：</label>
                    <input 
                        onChange={this.changeName}
                        type="text" 
                        value={this.state.username} 
                        id="username" 
                        name="username" 
                        placeholder="用户名"/>
                </div>
                <div>
                    <label htmlFor="pwd">密码：</label>
                    <input 
                        onChange={this.changePwd}
                        type="password" 
                        value={this.state.password} 
                        id="pwd" 
                        name="pwd" 
                        placeholder="用户名"/>
                </div>
                <button>提交</button>
            </form>
        )
    }
}

export default FormDemo

　　

 

 　　其他作用

对于受控组件来说，每个 state 突变都有一个相关的处理函数。这使得修改或验证用户输入变得简单。
例如，如果我们要强制要求所有名称都用大写字母书写，我们可以将 changeName改写如下：

　　

 　　至此还可以在每次输入后，输出打印输入内容，但最好做下性能优化，详见文章React 组件优化之函数防抖节流---使用 debounce +throttle 函数.

 　　

 

（4）ref

　　React避免操作DOM

 　   步骤一：创建注册ref

　　

注意：super()一定要写在最前面

　　步骤二：引用ref

 　　

 　　步骤三：测试输出

　　

 　　

　　审查即可得知，里面是原生node节点

　　

 

 　　接着便可以根据ref操作DOM

　　

 

 　　如下所示

　　

注意：
    React里如果不是意外，尽量避免直接操作DOM，尽量使用state

　　接下来介绍下非受控组件（注意：受控组件和非受控组件都是针对form表单）

 　　详解文章React非受控组件.

 　　关于受控组件和非受控组件的取舍，主要取决于是否需要验证反馈

　　

　　但也有特例，例如type=file的控件，必须是非受控组件

在 React 中，<input type="file" /> 始终是一个非受控组件，因为它的值只能由用户设置，而不能通过代码控制。创建一个 DOM 节点的 ref 从而在提交表单时获取文件的信息。

 

 　　

 

（4）网络请求fetch之get请求

　　详解网络请求fetch之get请求.

 

（5）网络请求fetch之post请求

　　详见网络请求fetch之post请求

 

（6）封装http网络请求

　　新建http.js文件用来封装get和post请求

 　　1、封装get请求

 　　

 　　2、封装post请求

　　

 　　3、测试

　　首先在其他组件引入，注意：分析

　　

引入类和方法的区别：
    React等类直接写即可
    方法需要在外面用{}包围

　　封装之前写法

　　

 

 　　封装完成后调用httpPost写法，这里data为对象格式即可

　　

 

 　　get方法与之类似

　　小结：封装完整代码如下

// 封装get请求
export function httpGet(url){
    var result = fetch(url)
    return result
}
// 封装post请求
export function httpPost(url,data){
    var result = fetch(url,{
        method:'post',
        headers:{
            'Accept':'application/json,text/plain,*/*',/* 格式限制：json、文本、其他格式 */
            'Content-Type':'application/x-www-form-urlencoded'/* 请求内容类型 */
        },
        //data表单数据，body最终要的格式为username=tony&pwd=123456，所以需要格式化
        body:paramsPostBody(data)
    })
    return result
}
//格式化data
function paramsPostBody(obj){
    var result = '';//接受最后结果
    var item;
    for(item in obj){
        result += '&'+item+'='+encodeURIComponent(obj[item])
    }
    if(result){
        result = result.slice(1)//去掉第一个&
    }
    return result
}

 

　　

（7）Mock数据模拟Node服务器

　　详见Mock数据模拟Node服务器

　　

（8）React网络请求跨域代理设置

　　详见React网络请求跨域代理设置

 

 

 

 

 

 

.