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：

React.createClass()

 

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

 

 

2.构造函数

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

 

 

 

 3.class

 

 

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

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

 

 

 

 

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

 

 

5.怎么访问state

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

 

 

Props

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

 

 如何访问props

 

 

 

 

Refs属性

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

如何获取真实dom

第一种 ref后面是字符串

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

 

 

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

 

 第二种

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

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/yangjingyang/p/11574731.html

相关资源：JAVA上百实例源码以及开源项目