本文共 1597 字，大约阅读时间需要 5 分钟。

教程

react只是一个view层次的库 jsx是什么？ jsx会被替换为React.createElement

react jsx的属性和html dom有区别的属性，下面的连接可以用来解释为什么style属性只接受map类型的value

babel是什么？babel在react里面的的作用是什么？

1. 将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.				
   
                        {this.state.tags.map(tag => 
    
{tag}
)}				
   
				记得定义唯一的key				  
   
                        {this.state.tags.map(tag => 
    
{tag}
)}                
   

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 快速生成代码