前言
这几天因为实习的原因，很短的时间内简单的接触了一下前端。只能在没啥基础的情况下嗯看React了
说实话js我都不会，但井字棋教程这么写的
我们假定你已经对 HTML 和 JavaScript 都比较熟悉了。即便你之前使用其他编程语言，你也可以跟上这篇教程的。除此之外，我们假定你也已经熟悉了一些编程的概念，例如，函数、对象、数组，以及 class 的一些内容。
好吧，相信他
事实也确实如此，好在react 的官方教程非常的友好，照着教程的帮助下，两天把井字棋弄完了
入门教程: 认识 React – React (docschina.org)
整个过程还是很舒服的，毕竟有原码可以直接比较错误。前端F12直接调试也非常的舒服。
关于井字棋的最后6个改进，做了一些前面的，感觉更多是算法上的问题，有一些对于数组的使用，有一些需要你去思考放在哪个事件上面，没有什么超过教程的东西
js不太懂的语法也就那几个，百度或者看官方文档基本都能解决，边做边学的效率还是很高的
开这个分组，是因为后面几个星期或者一个月会写一些运维的工具台，可以把前端踩的坑都记录一下
和后端交互
如果上网搜的话，会看到fetch和ajax。快速浏览了一下用了fetch
当然，react新手教程并不会教我Fetch API如何使用，但是mdn会
使用 Fetch – Web API 接口参考 | MDN (mozilla.org)
按照上面所说 fetch 的基本使用如下：
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
为了讨论.then() ，需要先递归的学习
异步 JavaScript 简介 – 学习 Web 开发 | MDN (mozilla.org)
Promise – JavaScript | MDN (mozilla.org)
涉及到 事件处理 回调
异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。
一个
Promise必然处于以下几种状态之一：
- 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
- 已兑现（fulfilled）：意味着操作成功完成。
- 已拒绝（rejected）：意味着操作失败。
待定状态的 Promise 对象要么会通过一个值被兑现，要么会通过一个原因（错误）被拒绝。当这些情况之一发生时，我们用 promise 的
then方法排列起来的相关处理程序就会被调用。
此时是可以和本地后端通信了，如果需要和不同域名和ip的地方通信就涉及到了跨域的问题
跨源资源共享（CORS） – HTTP | MDN (mozilla.org)
可以不去细读，需要知道的是 通过在头部添加cors
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
让前端来支持
最后如下
componentDidMount(){
var t = this;
fetch("http://x.x.x.x/test", {
method: 'GET',
headers: {
mode: 'cors'
}
})
.then(
function (res) {
console.log(res);
res.json().then(function (data) {
console.log(data);
t.setState({
data: data
});
console.log(Object.keys(t))
}
)
})
}
后端也建立一个简单的通信
flask为例，添加：
from flask_cors import CORS
CORS(app, resources=r'/test')
再建立路由即可
关于this
为什么不能直接在函数中使用 this.setState ，而需要t.setSetate呢
我们通过devtools设置断点
会发现
此时的this是没有定义的，但是t会指向message对象
参考：
this – JavaScript | MDN (mozilla.org)
Promise中this指向问题_剪断红线，替代月老的博客-CSDN博客
我们得出一些总结
作为对象的方法时，他能展现出我们预期的，即this为这个对象
作为函数的大部分时候，例如非严格的正常函数，会在未绑定时指向 window
但对于Promise 对象而言，情况有些复杂，姑且记得
Promise对象的回调函数如果是箭头函数时，this指向一致，都是指向外层第一个普通函数的this。但是Promise对象的回调函数如果是匿名函数时
Promise对象的状态是pending，那么匿名回调函数的this指向window。
Promise对象的状态是resolved，那么匿名回调函数的this指向undefined。
如何处理传递过来的对象
转递过来的res.json 会在state里面存储为对象
但是这个对象我是并不知道他的key的，我需要遍历整个对象
好在
let key = Object.keys(this.state.data);
可以直接获取所有的key
这样我们就可以通过key来获得所有的键值对了，当然也可以Object.values(obj)
评论
催更