React 组件

React 的世界里一切皆是组件,我们使用class语法构建一个最基本的组件,组件的使用方式和HTML相同,组件的render函数返回页面渲染的一个JSX,然后使用ReactDom渲染到页面里

属性传递

React组件使用和html类似的方式传递参数,在组件内部,使用this.props获取所有的传递的参数,再JSX里使用变量,使用{}包裹

JSX

JSX是一种js的语法扩展,表面上像HTML,本质上还是通过babel转换为js执行,所有在JSX里我们是可以在{}中使用js的语法,我们也可以在在线学习地址里,把右边的显示JSX勾选取消,就可以看到JSX渲染成js后的样子

JSX本质上就是转换为React.createElement在React内部构建虚拟Dom,最终渲染出页面

State和事件绑定

  1. state和事件绑定

我们到现在为止还没发更新UI,React内部通过this.state变量来维护内部的状态,并且通过this.stateState来修改状态,render里用到的state变量,也会自动渲染到UI

我们现在constructor来初始化state,在JSX里使用this.state.num获取,

然后jsx里使用onClick绑定点击事件,注意这里需要在constructor里使用bind方法绑定this指向,然后内部调用this.setState修改值,注意这里不能写成this.state.num+1,而是要调用this.setState,返回一个全新的num值

生命周期

在组件内部可以生命一些特殊的方法,会在组件的不同阶段执行,比如组件加载完毕后会执行componentDidMount函数,组件更新的时候,会执行shouldComponentUpdate函数,如果返回true的话,就会一次执行componentWillMountrendercomponentDidMount,如果返回false的话,就不会执行

表单

用户想提交到后台,表单元素是最常用的,一个常见的表单由form input label等标签构成,我们通过onChange和控制value的值,最终通过state,让原生的html输入内容和React链接起来

渲染列表

页面里序列化的数据,比如用户列表,都是一个数组,我们通过map函数把数字直接映射为JSX,但是我们直接渲染列表,打开console的时候会看到Each child in an array or iterator should have a unique "key" prop.报错,渲染列表的时候,我们需要每个元素都有一个唯一的key属性,这样React在数据变化的时候,知道哪些dom应该发生变化 尤其注意key要唯一,使用每个字段唯一id,或者使用索引

React16新增了什么

2017年9月27日,Facebook 官方发布了 React 16.0。相较于之前的 15.x 版本,v16是第一个核心模块重写的版本,并且在异常处理,核心架构和服务端渲染方面都有更新。

  • render 函数支持返回数组和字符串
  • 异常处理,添加componentDidCatch钩子获取组件错误
  • 新的组件类型 portals 可以渲染当前容器dom之外的节点
  • 打包的文件体积减少 30%
  • 更换开源协议为MIT许可
  • Fiber架构,支持异步渲染
  • 更好的服务端渲染,支持字节流渲染