REACT特点
声明式编码 组件化编码 高效 支持服务端渲染 单向数据流
JSX解析
遇到<>开头的代码，同名的h5标签会解析成h5标签 其他标签特殊处理
解析js代码用{}包裹
REACT框架的核心部分,提供了Component类可以共我们进行组件开发,提供了钩子函数(生命周期函数)
所有的生命周期函数都是基于回调函数完成的
react-dom :把JSX语法(REACT特有的语法)渲染为真实DOM(能够展示的结构都叫真实的DOM)
- 不推荐jsx的容器是body
- 只能出现一个根元素
- 给元素设置样式类用的是className而不是class
- style={{}}
- jsx元素设置属性 ,属性值对应大括号中 对象,函数都可以放(也可以放js表达式)
JSX介绍
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
例如，JSX 里的 class 变成了 [className]，而 tabindex 则变为 [tabIndex]
元素渲染
元素就是描述DOM节点或者REACT组件的纯对象。元素可以在自己的属性包含其他元素，一旦元素被创建后 就不在发生改变
创建React元素
const element = <h1 className='greeting'>Hello, world</h1>;
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
最终其实编译成了类似下面的js对象
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}，
_context: Object,
_owner: null,
key: null,
ref: null,
}
React 组件
组件/模块管理 ,就是把一个程序划分为一个个组件来单独处理
优势
- 有助于多人协助开发
- 提高复用性
劣势
可能就是提高了代码量吧
React创建组件有两种方式
函数声明式组件
函数式
简单
能实现的功能也很简单,只是简单的调取和返回jsx而已
基于继承component类来创建组件
操作相对复杂一些,但是也可以实现更为复杂的业务功能
能够使用生命周期函数操作业务
函数式可以理解为静态组件(组件中的内容调取的时候就已经固定了,很难在修改,而这种类的组件可以基于组件内部的状态来动态更新渲染的内容
React声明周期.png
基本流程
constructor 创建一个组件
componentWillMout 第一次渲染之前
render 第一次渲染
componentDidMout 第一次渲染之后
修改流程:当组件的状态数据发生改变(setState)或者传递给组件的属性发生改变
shouldComponentUpdate 是否允许组件重新渲染(允许则执行后面函数,不允许直接结束即可)
componentWillUpdate 重新熏染之前
render 第二次以后重新渲染
componentDidUpdate 重新渲染之后
属性改变:
componentWillReceiveProps(nextProps/nextState):父组件把传递给组组建的属性发生改变后出发的钩子函数
接受最新属性之前,基于this.props.xxx 获取的是原有的属性信息,nextProps存储的是最新传递的属性信息
shouldComponentUpdate
是否允许组件更新, 返回true是允许,返回false 是不在继续走
componentWillUpdate:
更新之前: 和should一样,方法中通过this.state.xxx 获取的还是更新前的状态信息,方法有两个参数:nextProps/nextState存储的是最新的属性和状态
render 更新
componentDidUpdate 更新之后
卸载
componentWillUnmount :卸载组件之前(一般不用)
网友评论