React(上)

时间:2024-12-04 17:35:02

一、React基础

1.React模板

凡是使用JSX的地方,要加上type="text/babel"。引用三个库react.js是React的核心库,react-dom.js提供与DOM相关的功能,Brower.js将JSK语法转为JavaScipt语法。

2.ReactDOM.render()方法

用于将模板转为HTML语言,并插入指定的DOM节点。

jsx语法:js和html混着写,js代码写在花括号内。

二、组件与状态机

1.组件

React可以像插入HTML标签一样,将组件插入到网页中。React.createClass方法用于生成一个组件类。

2.this.props对象

props是组件的标签属性和子节点构成的集合

children是组件标签的所有子节点,对于子节点的渲染,reacty用this.props.children,当前组件没有子节点,它是undefined,如果有一个子节点,它是object,如果多个子节点,数据类型就是array;我们可以用React.Children.map来遍历子节点,而不用担心this.props.children的数据类型。

3.propType

组件的属性可以接受任意值,字符串、对象、函数等都可以,组件类的PropType属性,就是用来验证组件实例的属性是否符合要求。

getDefaultProps方法可以设置组件属性的默认值。但是这个方法必须要return出的obj。

4.获取真实的DOM

组件并不是真实的DOM节点,而是存在于内存中的一种数据结构,叫做虚拟DOM。只有当它插入文档以后,才会变成真实的DOM。

从组件获取真实DOM节点,用ref属性。

第一步:将别获取元素加上ref属性并赋值;

第二步:通过控制台输出this.refs;

用this.refs.[refname]来获取真实的DOM节点。

5.this.state对象

React将组件看成一个状态机,一开始有一个初始状态,然后用户互动,导致状态发生变化,从而触发重新渲染。

区别:this.props表示一旦定义无法改变的特性,this.state是会随用户的互动而变化的特性。

getInitialState方法用于定义初始状态,可以通过this,state属性读取。this.setState方法修改状态值。

三、表单与生命周期

1.表单

用户在表单填入内容,属于用户和组件的互动,不能用this.props读取。

文本输入框的值,不能用this.props.value读取,而是要定义一个onChange事件的回调函数,通过even.target这个事件源的value属性读取用户输入的值(event,target,value),textarea元素,select元素,radio元素都属于这种情况。

2.组件的生命周期

react组件的生命周期分为三个部分:

Mounting:已插入真实DOM

Updating:正在被重新渲染

UN某难听:已移出真实DOM

两种处理函数:will函数在进入状态之前调用,did函数在进入状态之后调用。

componentDidMount()已插入真实的DOM后执行的函数。

3.ajax

组件的数据来源,通常是通过Ajax请求从服务器获取,可以使用componentDidMount方法设置ajax请求,等到请求成功,再用this.setState方法重新渲染UI。