React阶段性总结

React简介 :

React 是一个用于构建用户界面的 JAVASCRIPT 库,主要用于构建UI

React由美国的公司Facebook在2011年诞生并于2013年开源发布

特点:

1.声明式设计 −React采用声明范式,可以轻松描述应用。

2.高效 −使用虚拟dom+优秀的diffing算法,减少了与真实dom的交互

React中的组件类型:

class组件(类组件):

在 class 类组件中 React 元素的位置是在 render() 函数中,也就是说,类组件中必须有一个 render() 函数,在 render() 函数中必须有 return 的值,这个值必须是虚拟 DOM(React 元素)。

函数组件(无状态组件):

1. 组件名字首字母是大写的
2. 函数组件又叫无状态组件,没有生命周期
3. 函数组件只有当展示视图的时候才用。做复杂的数据处理、需要有自己的状态的时候,需要用类组件。

JSX语法:

在使用react框架开发后发现里面用jsx语法代替了javascript
jsx语法是一个类似于XML的js语法扩展

jsx优点:
1.JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
2.它是类型安全的,在编译过程中就能发现错误。
3.使用 JSX 编写模板更加简单快速。

State:

State是可读可写的,但是必须要用setState来修改

Props:

Props是只读的

使用场景:
1.父传子:props.children 接收父组件(闭合组件)传入的数据

2.子传父:子组件通过调用父组件传递到子组件的方法向父组件传递消息的。

3.同级互传:通过父级中介实现兄弟a组件的数据给到兄弟b组件

具体流程:组件A – 传值 --> 父组件 – 传值 --> 组件B

4.接收组件
 

React生命周期:

挂载阶段:

constructor (初始化数据,挂载前(只在页面加载时执行一次))

render (渲染数据/dom片段到页面(非一次性,可多次触发))

componentDidMount  挂载完成(一般用于发起ajax请求,定时器)

更新阶段:

render

componentDidUpdate (更新完成)

销毁阶段:

componentWillUnmount (销毁一半用于清除定时器,取消ajax请求)

上一篇:前端网站开发培训,HTML如何添加锚点


下一篇:React学习笔记01