平安喜乐

react入门

2018/6/6 react

# react

此文档所有东西都是根据阮一峰大神的网络日志而来

# 一，HTML模板

image.png

这个标签的type属性，必须设置为text/bable,这是因为react的jsx雨大，跟javasrcipt不兼容，凡是使用jsx语法的地方，都要加上type=“text/bable”。

关于库的使用，demo用了三个库，react.js，react-dom.js，Browser.js，他们必须首先加载，其中react.js是react的核心库，react-dom.js是提供与DOM相关的功能，Browser.js的作用是将jsx语法转为JavaScript语法，这一步很消耗时间，实际上线的时候，要放在服务器完成。

image.png

这个命令是可以将SRC子目录的JS语法进行转换，转换后的文件全部放在build的子目录里面

# 二，reactDOM.render（）

reactDOM.render（）是react最基本的方法，用于将里面的内容转为HTML语言，并且插入一个DOM节点。

image.png

运行结果如下

image.png

# 三，jsx语法

它允许HTML遇见直接卸载JavaScript语言中，不加任何引号，

jsx允许直接在内容里面插入变量。如果变量是一个数组将会展开这个数组的所有成员。

例如

image.png

这是一个数组，但是输出的时候jsx会把所有数组里面的成员，添加到内容上并运行。

image.png

# 四，组件

react可以将代码封装成组件component，然后想插入普通的html标签一样，在网页中插入这个组件。

组建的第一个字母必须大写，不然报错。，组件只能包含一个顶层标签，也就是最外面只能有一个标签。

image.png

添加组件属性的时候，class属性需要写成ClassName，标签中的for需要写成htmlfor，这是因为class和for是JavaScript的保留字。

# 五，this.props.children

this.props.children属性，她查看所有组件的子节点

如果没有自己节点的话，就是undefined，

如果有一个子节点就是，object，

如果由多个子节点就是数组，array。

react提供了一个工具方法，React.Children来处理this.props.children,可以用React.Children.map

来遍历子节点，而且不用担心，this.props.children的数据类型是什么。

image.png

# 六，PropTypes

组件的PropType属性，就是用来验证组件实例的属性是否符合要求。

这个方法已停用，目前在用 defaultprops,通过defaultprops属性为props定义默认值。

image.png

# 七，获取真实的DOM节点

组件并不是真实的DOM节点，而是一个虚拟DOM，通过ref获取真是的DOM节点。

image.png

为了做到文本框能拿到用户的输入，需要设置一个ref属性，然后this.refs.[refName]就会返回这个真实的 DOM 节点。，这个this.refs.[refName]是获取真实节点，需要等虚拟DOM插入文档以后，组件指定事件Click 回调函数，只有确定真实的DOM存在，事件Click 才会读取后this.refs.[refName]属性。

# 八，this.state

组件免不了要与用户互动，react的一大创新，就是将组件看成了一个状态机，一开始有一个初始状态，然后用户互动，导致状态化，从而触发重新渲染UI。

image.png

上面的代码是一个LikeButton组件，他的构造函数里面是定义了一个初始状态，根据this.state属性读取，当用户点击组件的时候，导致状态化，this.setState方法就是修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件。

由于this.props和this.state都是用于描述组件的特性，可能会产生混淆。一个简单的区分方法就是，this.props便是那些一旦定义就，就不能在改变的特性，而this.state是会随着用户互动而产生变化的特性。

# 九，表单

image.png

用户在表单填入的内容，属于用户跟组件的互动，所以我们不能用this.props读取。

在上面的代码中，文本输入框的值，不能用this.props.value读取，而要定义一个onChange事件的回调函数，通过e.target.value读取用户输入的值，textarea元素，select元素，radio元素，都属于这种情况。

# 十，组件的生命周期

组件的声明周期分为三个状态：

  • Mounting:已插入真实的DOM
  • Updating:正在被重新渲染
  • Unmounting:已被移除真实的DOM

react为每个状态都提供了两种处理函数，will函数进入状态之前调用，did函数在进入状态之后调入，三种状态共计五种处理函数。

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)
  • componentWillUnmount()

此外，react还提供两种特殊状态的处理函数

  • componentWillReceiveProps(object nextProps) 已加载组件受到新的参数调用。
  • shouldComponentUpdate(object nextProps, object nextState) 组件判断是否重新渲染是调用

image.png

上面的代码在hello组件加载以后，通过componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

注意如果用箭头函数的话就不用绑定了，因为箭头函数this的指向是一样的。

# 十一，Ajax

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

image.png

用console。log是想看输出是什么类型的数据，以上代码是引入jQuery完成了，这说明了，react本身没有任何依赖，可以使用其他的库完成Ajax.

我们甚至可以把一个promise对象传入组件

image.png

下面代码接上面的代码。

image.png

上面的代码是从GitHub的API抓取数据，然后将promise对象作为属性，传给RepoList组件，如果上面promise对象抓取数据（pending状态），组件显示“正在加载”，如果promise对象报错（rejected状态），组件显示报错信息，如果promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。

react评论框