React（上）

Posted 2020-12-26 qing9

一、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。