阮一峰react入门笔记

1、造树。type=text/babel，逗号分离 

2、jsx语法（遇到HTML标签（以 < 开头），就用HTML规则解析；遇到代码块（以 { 开头），就用JavaScript规则解析）。

函数参数之间的空格，结尾不加分号，数组里可放html；

      

    

3、组件。组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。

4、属性。Proper（属性）从父组件传入的数据会做为子组件的 属性（property ） ，这些 属性（properties） 可以通过 this.props 访问到。

Tip1，class 属性需要写成 className ，for 属性需要写成 htmlFor ，其他正常

Tip2，例外 this.props.children 属性。它表示组件的所有子节点（更多）

Tip3，组件类的PropTypes属性，用来验证组件实例的属性是否符合要求（更多）

Tip4， 设置组件属性的默认值。

5、DOM节点

注：必须获取真实的 DOM节点，虚拟DOM是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的DOM节点。

  需要注意的是，由于 this.refs.[refName] 属性获取的是真实DOM，所以必须等到虚拟DOM插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实DOM发生 Click 事件之后，才会读取 this.refs.[refName] 属性（更多事件）。

6、This.state。this.props 表示那些一旦定义，就不再改变的特性， 而 this.state 是会随着用户互动而产生变化的特性。

用户在表单填入的内容，属于用户跟组件的互动，如input元素、textarea 元素、select元素、radio元素（详情）

7、组件生命周期（更多）。will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

React组件样式是一个对象，所以第一重大括号表示这是JavaScript语法，第二重大括号表示样式对象

8、ajax

一个Promise对象可以理解为一次将要执行的操作，使用了Promise对象之后可以用一种链式调用的方式来组织代码，让代码更加直观。

Promise 对象有三种状态：
1.Fulfilled 可以理解为成功的状态
2.Rejected 可以理解为失败的状态
3.Pending 既不是 Fulfilld 也不是 Rejected 的状态，可以理解为 Promise 对象实例创建时候的初始状态。

 

then方法就是根据 Promise 对象的状态来确定执行的操作,then方法负责添加针对已完成和拒绝状态下的处理函数

养成了一个个人习惯就是在then方法内部永远显式的调用return或者throw catch

.catch(function(error){
               console.log(error);
            });

链接本地json

json格式

{

"xx":"xx",

"xx":[{

   "xxx":"xxxx",

   "xxx":"xxxx"

}]

}

阮一峰 React 入门实例教程