踩个坑：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比较好用的地方在于。。。。。想不出来。。。。。。。明天继续喽！