React的学习（4）ajax-》axios

踩个坑：react中用confirm前面要加window

这种添加删除评论的功能，前面vue也做过，这里主要就是习惯react实例的三个属性refs，props，state的用法，没什么可说的

PubSub

哭了，这个是npm i pubsub-js ，不是.js，找半天原因。。。。。下错了
发布订阅怎样理解：像微信的订阅，订阅完了才会给你发布信息，所以先订阅后发布，订阅越快越好，所以放在挂载前比较好，注意下this的问题，感觉像先绑定事件，然后到一定条件再去触发，这个vue也用到了

ajax-》axios

这里promise的事情，复习下
new一个promise时，有两个参数，resolve和reject，new的时候有个初始化状态，然后执行异步任务，成功了就调用resolve，然后会修改promise的状态为成功状态，反之则失败状态，修改状态就是为了触发回调函数，也就是实例对象的then，第一个成功，第二个失败

接下来是回顾跨域问题，最常用两种：
先说jsonp，利用了script标签的src属性不受跨域的限制，因为他发的是普通的http请求，底层原理：首先在浏览器端需要提前定义好一个回调函数（callback）,这个回调函数必须要有一个形参，然后动态创建一个script标签，在恰当的时机给他添加一个src属性，这src的地址就是你要发送请求的地址，这个地址中请求的url中要把callback作为一个参数带到服务器端，服务器端要接受这个回调函数的名字，服务器端返回的时候callback需要拼串callback+“（”+json+“）”，其中的json是服务器返回给浏览器的json数据，就是这样。只能解决get存在的跨域问题，因为script src属性只会发get请求

另一种是利用cors技术把ajax引擎这道门打开，通过设置响应头Access-Control-Allow-Origin：*，支持get，post等，当然cors存在兼容性问题，好像到ie8

补充状态码
304缓存（3开头代表重定向）

axios好像没啥可说的，vue用过，fetch就是提前处理了一下，axios就是在浏览器包装了一下

SEO优化

语义化标签：结构好，工整
meta标签写一些关键字
搜索引擎爬取alt
外链（加一些链接）

alt与title的区别：

alt：在文本加载不出来的时候用文字代替他
title：鼠标放上去有提示文字，提高用户体验

实现搜索，这里注意生命周期中componentWillReceiveProps(nextProps)的使用

这个的作用是：组件将要接收props数据或者是props数据发生变化的时候调用，其中的参数是nextProps，代表最新的最新的props对象
vue那块是使用PusbSub，react我想了下，也行，但是利用这个生命周期其也可以，我们的目的是，state改变了，我的子组件要知道
贴一个主要代码吧

import React, {
     Component} from 'react'
import axios from 'axios'
class List extends Component{
     
    constructor(props){
     
        super(props)
        this.state = ({
     
            firstView: true,
            loading: false,
            users: null,
            error: null
        })
    }
    //组件将要接收props数据或者是props数据发生变化的时候调用
    componentWillReceiveProps(nextProps){
     //最新的props对象
        let url = `https://api.github.com/search/users?q=${
       nextProps.searchName}`
        //更新状态
        this.setState({
     
            loading: true,
            firstView: false
        })
        console.log(nextProps)
        //发送请求
        axios.get(url)
            .then(response => {
     
                let data = response.data
                console.log(data)
                this.setState({
     
                    loading: false,
                    users: data.items
                })
            })
            .catch(err => {
     
                console.log(err)
                this.setState({
     
                    loading:false,
                    error:err                 
                })
            })
    }
    render(){
     
        let {
     firstView, loading, users, error} = this.state
        if(firstView){
     
            return <h2>enter name to search</h2>
        }else if(loading){
     
            return <h2>loading。。。</h2>
        }else if(users){
     
            return(
                <div className="row">
                    {
     
                        users.map((user, index) => {
     
                            return(
                                <div className="card" key={
     index}>
                                    <a href={
     user.html_url} target="_blank">
                                    <img src={
     user.avatar_url} style={
     {
     width: '100px'}}/>
                                    </a>
                                    <p className="card-text">{
     user.login}</p>
                                </div> 
                            )
                        })
                    }
                    
                </div>
            )                      
        }else{
     
            return <p>暂时没有匹配到用户，请重新匹配</p>
        }
    }
}
export default List

总结下使用react的感觉，感觉没有了vue中的v-for和v-if，而且没有强制绑定，需要加一些{}，可能react比较好用的地方在于。。。。。想不出来。。。。。。。明天继续喽！