React 项目的初始化搭建

由于手动搭建 React 环境过于麻烦，要的依赖相当多，需要花费大量时间在配置上，所以就直接使用 React 官方提供的 create-react-app 脚手架工具。

脚手架的使用有两种方法，一种是先用 npm 或 yarn 全局安装 create-react-app 然后再create-react-app my_app，另一种是使用npx create-react-app my_app这样就不用提前安装好 create-react-app 工具。

Github 仓库地址：https://github.com/yydrowz3/notebook_app

之前在图书馆里找到了一本 React.js 实战，本来也正好在学习，就想着先借回来看看。

需要事件绑定的原因

首先说明一下，React生成出来的事件，里面的this并不是指向自身的，这是Javascript语法的规定，是不可避免的。

比如<button onClick={this.plus}>plus</button>中，plus上的this其实是绑在了window上的，也就是事件响应时的上下文，并不是当前的组件实例。说简单点，就是当触发该事件时，是在浏览器的总的一个环境里的，所以这时事件里如果用到this的话，this指向的其实是window。

但是这样会使得事件的使用和处理变得相当麻烦，所以这时就需要将事件内的this指针转移到事件的作用域上。

简单看一下bind()函数

调用 bind() 会创建一个新的函数，当这个新函数被调用时，函数内部的this会被置为参数提供的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var example = {
    value: 114514,
    getValue: function() {
        return this.value;	//这里使用了this
    }
}

var unbindThis = example.getvalue;
console.log(unbindThis()); // 调用的对象是window，所以里面的this.value => window.value
// output: undefined

var bindThis = unbindThis.bind(example);
console.log(bindThis()); // 但是bind之后，会将this的值置为example提供的值
// output: 114514

React学习…

看了下React的状态提升的理念，试着写了一下，同时也顺便复习了一下之前就不太熟的面向对象的编程思维。

大致上把React的核心概念看了，有点感觉了，是个非常好用的框架。


这几天又想折腾自己的破博客了，下了个主题，源代码文件夹里一看全是 React，笑死，根本看不懂。

怎么办？硬着头皮学呗。而且本来也计划要学一下前端的框架的。

假期里学了 html css js，但是实际开发中用这些效率实在是太低了，非常容易出问题不说，出了问题根本没法改，代码结构太乱了，一万个人一万种写法。所以前端也发展出了自己的框架，目前主流的就是 vue react angular。本来是想学 vue 的，因为 vue 是比较新的，最近这几年特别火，中国的大部分公司前端都是用 vue 的，而且这语言本身就是中国人写的。

但是当时想学的时候看了半天看不明白，跑去学 JavaScript 基础了，现在倒是对 React 挺感兴趣的了。

跟着 React 官网教程做的 TicTacToe，做倒是做出来了，就是代码看着还是有点逻辑混乱，毕竟没接触过这种框架式的前端开发，有点看不明白。