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请求)