本文共 1613 字，大约阅读时间需要 5 分钟。
教程
react只是一个view层次的库
jsx是什么？
jsx会被替换为React.createElement
react jsx的属性和html dom有区别的属性，下面的连接可以用来解释为什么style属性只接受map类型的value
babel是什么？babel在react里面的的作用是什么？
- 将jsx转换为js
虽然没有直接使用React，但是为什么还要引入呢？
我们的react应用代码里面一般都会有 用来引入React的语句,虽然在代码表面看来没有直接使用React的地方，但是当我们写下jsx的时候就要清楚，babel会把jsx转化成js代码，而这个js代码恰好用到了React
import React from ‘react’;
创建react 元素
import React from ‘react’
React.createElement(“h1”, null, “hello”)
把react虚拟dom render到真实dom的方法
import ReactDOM from ‘react-dom’
Warning: Each child in an array or iterator should have a unique "key" prop. <ul> {this.state.tags.map(tag => <li >{tag}</li>)} </ul> 记得定义唯一的key <ul> {this.state.tags.map(tag => <li key={tag}>{tag}</li>)} </ul>TypeError: Cannot read property 'state' of undefined因为this此时是undefined在不同的地方调用，this所指的内容是不一样的解决方法：方法一.使用箭头函数，因为箭头函数本身就是继承了所在的this方法二.使用constructor并进行bind react处理事件
onClick
修改react state
this.setState()不要直接去修改this.state
state变化时发生了什么
react handle函数传参数
在不需要参数的情况下，我们已经会使用了，当需要传递参数的时候要怎么做呢？
先定义一个需要传参数的函数
然后使用箭头函数
react this.props 在组件中只能是只读的
All React components must act like pure functions with respect to their props.
this.props.children 的使用
组件标签之间的内容是this.props.children
但是我们有对值的变化的需求要怎么办？我们可以把需要变化的值存放到state中
react 开发者插件
$r 的作用可以选择react的纯js对象
就像$0可以代表dom一样, 在调试console中输入$0.click()可以模拟点击
rule of thumb
组件的state最好是由组件自身进行修改
所以最后的handle函数是在需要修改state的组件上
解决方法就是通过props 传递给它一个onHandle函数
single source of truth
每一个component有其自己的local state
解决方法是remove the local state ，使用props进行替换
非常重要的快捷键
WebStorm
记得使用react-snippets 插件或者自己定义一些模版代码
代码块，右键， refactor->Extract->Method 快速生成代码