React基本使用

 一、React中的组件

创建一个组件

1.父组件向子组件传递数据

2.使用{...obj}属性扩散传递数据

3.将组件封装到单独的文件中

4.注意:组件的名称首字母必须是大写

不管是Vue还是react中的props都是只读属性，不能更改

组件分为函数式组件（ES5）和类组件（es6）

注意：切勿直接修改state数据，直接state重新渲染内容，需要使用setstate

通过this.setstate修改完数据后，并不会立即修改DOM里面的内容,react会在，

这个函数内容所有设置状态

二、props传值

在父元素中使用state去控制子元素props的从而达到父元素数据递给子元素

九、子传父-函数调用函数

三、react的事件

特点：事件绑定名用驼峰法命名。

传入一个函数，而不是字符串

事件对象：react返回事件对象是代理原生的事件对象，如果要查看事件对象的具体值，必须直接输出事件对象的属性

原生，阻止默认行为时，可以直接返回return false；在react中阻止默认必须e.preventDefault（）；

react事件传参用箭头函数，如果不用箭头函数就需要用bind绑定this

四、react条件渲染

在react中条件渲染即和JavaScript中，条件运算，如if...else...三元运算符。

将列表的内容拼装成一个数组，放到元素中：

将数据拼装成jsx对象，使用map方法，对每一组数据按照jsx的形式进行加工，最终得到1个每一项都是JSX对象的数组，在将数组渲染到模版中，并且需要将key值加上

五、生命周期

生命周期即是组件从实例化到渲染到最终从页面中销毁，整个过程就是生命周期，在这生命

周期中，我们有许多可以调用的事件，也俗称为钩子函数

生命周期的3个状态:

compoentWillMount:组件将要渲染。AJAX,添加动画前的类

compoentDidMount:组件渲染完毕，添加动画

compoentWillReceiveProps：组件将要接受props数据

ShouldComponentUpdate:组件接收到新的state或者props,判断是否更新。返回布尔值

Compoentwillupdate:组件将要更新

componentDidUpdate;组件已经更新

Componentwillunmount:组件将要卸载