React学习笔记每当我们运行create-react-app projectName得时候都会生成2个文件夹(node

之前根据官方文档的教程写了一个DEMO，感觉还是不够，所以特意上网找了一些更为全面的教程进行练手。毕竟无论学习什么，最快上手的方式都是自己撸一撸。

具体练手项目可以参考：源码地址进行参考

项目具体的技术栈为：axios,react-router-dom,jsonp,antdesign,less,echarts,mockjs,draft-js,draftjs-to-html,react-draft-wysiwyg。但是这次总结主要是围绕react

项目入口

每当我们运行create-react-app projectName得时候都会生成2个文件夹(node_modules暂时忽略)，分别是pubilc以及src。开发的重点主要也是围绕在 src文件夹。然后根据平时的经验，index.js文件一般都是为项目的入口，那就直接从这个文件开始观看。懒得对着图片打字了，就直接在图片上解释吧，看图！

index.js本身内容不多，大概也就这些，当然，如果我们只是练手的话，可以把serviceWorker删掉，问题也不大。当然如果发布到线上的话建议还是好好研究一下

书写组件

写一个最简单的Component,是怎样的呢？目前接触过的有两种方式（经过查询还有React.createClass这种方式，但是本人没有接触过）：

import React,{Component} from 'react';
class Example extends Component{
   constructor(props) {
     super(props)
     this.state = {}
   }
  render() {
    return (<h1>Example</h1>)
  }
}

function  OtherExample (props) {
  return (<h1>Hello, {props.name}</h1>)
}

在我理解中，这两种声明组件模式都是可以的，前者使用的ES6的class ，后者则是使用的是函数组件（也称为无状态组件）。在我使用的方式来说，一般都是使用前者的，不管是否使用生命周期还是state（在16.8中也可以使用Hooks访问生命周期和state），因为这样在项目里面看起来更为美观和规范。需要注意的是，组件名称的首字母“必须”要为“大写字母”；还有render内部返回的代码里面，“有且只能”有一个根节点，如果说例如一定要用两个或者多个节点挂载到父节点上，可以选择使用Fragment，这个类似于一个虚拟的占位符，就行了。

踩过的坑点

以下内容都是开发的时候我觉得要注意的点，我在学习的过程中不小心踩了几次，特意记录了下来。

绑定事件的方式

首先一定要记住的是，绑定事件的名称一定要用驼峰式：onClick、onChange……这种。而且绑定事件的时候不能加括号，在JSX里面这是运行的标志，直接写方法名字就行。另外多说一个,class需要改成className才能生效。多说无益，直接贴图吧

`setState`的坑

setState本身并非“同步”的！！，在做练手项目的时候，有一个数据处理是需要依赖state的本身。但是发现并没有按照原本设想的逻辑进行，从而踩到这个坑。经过查阅官方文档以及技术论坛，发现了setState本身为了性能优化，以及数据更新的一致性（props）才做的处理。这个机制就有点像Vue本身的nextTick。如果真的需要同步，可以通过使用setState本身的第二个参数（回调函数），来进行处理。详细原理后续可能会出文章深入。

    this.setState({
      count: this.state.count + 1
    }, () => {
      console.log(this.state.count);
      console.log('加载完成')
    });

生命周期

无论什么框架都离不开生命周期这一说。在react中有着丰富的生命周期，下面按照生命周期的顺序梳理一遍。

constructor-------组件挂在前调用，初始化state，绑定事件示例（this）
*componentWillMount -------注意：该组件归为警告API，在挂载前调用，整个生命周期只会调用一次，更新不调用
render ------- 必须要有的函数，挂载组件，每次更改state或者props都会调用，除非被shouldComponentUpdate返回false
componentDidMount ------- 挂载组件后被调用，官方推荐在这个生命周期内部进行类似请求还有setState操作，进行DOM节点初始化。

以上都是挂载的生命周期，对应的还有更新组件的生命周期

*componentWillReceiveProps------- -注意：该组件归为警告API，当接受到新的props时调用，更改state不会触发，
shouldComponentUpdate ------- 这个生命周期控制了组件是否重新渲染，当返回true的时候会render，为false则不渲染，且不会运行componentWillUpdate、render以及componentDidUpdate
*componentWillUpdata ------- 注意：该组件归为警告API，这个生命周期同样的会在组件更新前触发，不过会在shouldComponentUpdate之后,在这个API之后就会运行render
componentDidUpdate ------- 组件更新后会调用，但是首次渲染不会调用

卸载生命周期：componentWillUnmount组件卸载或者销毁时触发，一般用于清除定时器以及订阅等等操作

当然不止这些一些比较陌生的生命周期：getDerivedStateFromProps、getSnapshotBeforeUpdate、getDerivedStateFromError、componentDidCatch，这些暂时还没想到有特别大的应用区域就不作解释了

表单组件

从Vue到React，其中一个很大的区别就是数据流向的差别，react是单向数据流，如果要实现类似于Vue中的双向绑定，一般都选择绑定onChange事件，然后对对应的state作出更改。当然这些都是没有应用其他框架的情况，如果有使用ant-design的话就可以使用其内部的表单组件进行。

父子组件通讯

类似于Vue，永远离不开的都是数据通讯问题，其实两个框架都很相像,看图！

总结：这篇文章主要是我在学习react时做的一些总结，是我个人需要注意的一些点。当然每个人觉得需要注意的点都不一样，如果你有其他觉得要注意的，也可以去我的issue里面提出。大家一起交流一起学习！

React学习笔记