本文主要记录自己曾在React开发过程中踩过的坑。

React组件声明时，第一个字母须大写

  这个问题出现的时间比较早了，是最开始接触React那会，曾把类名用驼峰法定义了，导致无法import。

在事件绑定中错误的闭合了函数，导致render时不断渲染触发该函数

  在使用Antd提供的封装Button组件内绑定回调函数时，想要往里面传参，但是由于闭合了函数导致了函数的自执行(姿势不对，Reason见《React中的合成事件以及传参问题》一文。

 在前端技术发展的过程中，诸如jQuery、angular、react、vue等等的”框架”出现给开发人员的coding效率带来了质的飞跃，不同的技术选型主要是结合了框架自身的优点以及对历史遗留问题的考量。于我自身而言，觉得框架除了思想上的革新外，更为关键的一点是对于不同浏览器环境的兼容问题做了一个统一处理，让我们能够更平滑地处理”单一”问题，而这之中有一些封装的隐性特征往往容易被我们忽略。

什么是合成事件？

  根据React官方文档所述，合成事件的英文术语为SyntheticEvent，我们调用的处理函数会接收一个SyntheticEvent的
实例，它是一个跨浏览器的封装组合体，具有与浏览器原生事件一样的接口，我们在React里绑定事件函数默认传递的都是合成事件。

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

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

 有这篇记录的主要原因是在开发新系统的时候，申请了新的集成环境，但是运维老大哥没有装nginx，我只好自己根据网络上的博客整理了一份自己的踩坑记录，避免以后再次部署的时候走弯路。

填坑六步

   1、在官方地址选择版本下载（gzip格式压缩的包.tar.gz后缀）
   2、从WINDOWS本机上传(rz -be)到连接的LINUX集成环境（试过直接wget，但是文件不完整）
   3、解压： tar -zxvf nginx-x.x.x.tar.gz

 写本文的初衷是在用antd的Form的时候，看到里面有个关联Button，并且在Form中传入onSubmit回调即可与嵌套的Button产生联动，当时我就惊了，为啥呢？

剔除使用误区

  首先在原生的表单事件中，其实是可以有两种处理方案的。由于现在使用的antd的Form，在通过@Form.create()后，form属性会被关联到本层props中，我们更倾向于在按钮标签内写入回调(onClick) React用驼峰，去通过form.validateFields()方法来直接处理表单数据或提交之类的问题。但是其实原生的表单处理还有另外一种监听方式，就是通过在Form标签写入onsubmit回调，然后关联内部的点击事件触发。我们可以在以上两种方案中任意一种中对我们的表单数据进行校验，当同时有onclick和onsubmit存在时，onclick将会更早地被触发，此处可以理解为先有表单的关联按钮触发事件，才有表单的响应回调。

 本篇博文主要是记录通过Hexo搭建个人博客的历程以及遇到的一些坑，当然也提供了填坑方案 😆。

相关依赖

Node.js&Npm

  此处的相关依赖指的不仅是Node.js和Npm，以及后面我们进行一些配置时需要在package.json中写入的依赖，通常我们通过
npm i 依赖包@版本号 --save命令来安装，版本号不加会默认下载最新版本的，可能会造成一些兼容性问题，同时可能会与你在网络上看到的一些教程有所差异。

  由于Node和Npm是捆绑安装的，我们只需要官方下载Node即可，传送门：Node官方下载。

  说起来也挺尴尬的，coding也有一阵了，一般项目根目录下都会有个README.md文件对项目进行一定的配置说明，但是从来没有关注过.md后缀的文件到底是什么格式的文件，直到开始使用Hexo重新建站（以前的WP服务器到期就没续了）后，发现其生成在_posts下的文章都是以markdown语法编辑的后，感叹了一声，豁。

什么是Markdown

​  首先，Markdown是一种轻量级标记语言，它可以被转换成有效的XHTML或HTML语言。所以在这种模式下，我们可以很便捷地先通过纯文本的方式编写文档再将其转换成静态HTML页面快速部署到网站上，比如此时此刻的Hexo文章。当然在这之前，我们需要学习一定的Markdown语法。