前言

这几天因为实习的原因，很短的时间内简单的接触了一下前端。只能在没啥基础的情况下嗯看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)

维修中。。。