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