react基础知识点

注意事项：

组件类的名称首字母必须大写，否则报错。组件类中的模板只能有一个顶层标签，否则报错。组件标签上class属性改成className   for属性改成htmlFor

 

使用React.createClass({})生成组件类

 

组件标签上可以任意添加属性 在组件类中使用this.props获取组件标签上的属性。

 

This.props.children是组件标签子节点构成的集合

 

当没有子节点 这个值是undefined 1个子节点 值是object 多个子节点是array。

 

用数组方法map遍历对前两种情况就不起作用，react专门提供了一个叫React.children.map的方法用于遍历this.props.children

 

5. propTypes

 

 

6,getdefaultprops

这个方法是用来设置组件属性的默认值

 

 

8.事件

在react的节点上添加事件 使用驼峰法 

 

 

后面绑定的事件函数必须写在{}里 定义事件函数直接写在组件类身上就行。

 

 

10表单

表单中的值不能使用this.props读取，表单中的内容用户和组件的互动。

而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

 

 

11生命周期

React的生命周期分三个状态分别是mount  update   unmount

三个状态中有五个钩子函数

componentDidMount()  组件加载到页面以后  往往是ajax

componentDidUpdate() 组件更新完成以后

 

定义组件的方法

1：

1. React.createClass()

 

定义的组件中的method中的this指向组件本身

2.构造函数

定义的组件是无状态的，没有state状态，没有生命周期，不能访问this。就是一个纯粹的静态页面.

 

 3.class

1. class中的事件函数中的this不是指向组件本身是null。
2. 通过class创建的组件的成员函数需要手动绑定。

3. 在class定义组件中添加state状态

    

    

4. 在事件成员函数中如何修改state呢

   5.怎么访问state

   在模板中直接使用this.state.属性 就可以了

Props

组件标签上的属性，都记录在定义组件中一个props属性上

 如何访问props

 

Refs属性

通过操作虚拟dom来获取真实dom。

如何获取真实dom

第一种 ref后面是字符串

1.给想要获取的元素身上加ref属性

Aa这个值就会在refs对象中充当一个属性 属性值是dom元素

 第二种

2.第二种 ref后面是一个箭头函数

 

H3xx是一个临时存放dom元素的属性，在个属性直接挂载在组件对象上