react基础知识1
React基础知识1
一.React的基本认识
1.1 官网:https://reactjs.org/
1.2 介绍描述
<1> 用于构建用户界面的 JavaScript 库(只关注于View)
<2> 由Facebook开源
1.3 React的特点
1)Declarative(声明式编码)
2)Component-Based(组件化编码)
3)Learn Once, Write Anywhere(支持客户端与服务器渲染)
4)高效
5)单向数据流
1.4 React高效的原因
<1> 虚拟(virtual)DOM, 不总是直接操作DOM
<2> DOM Diff算法, 最小化页面重绘
1.5 React的基本使用
//相关的js库
1) react.js: React的核心库
2) react-dom.js: 提供操作DOM的react扩展库
3) babel.min.js: 解析JSX语法代码转为纯JS语法代码的库
1.6 React开发者工具调试
网盘链接:
链接：https://pan.baidu.com/s/1XGRhKeM9I3c1WYHBMVkmTQ
提取码：4jj3
下载解压后将文件夹直接拖入到浏览器的扩展程序界面即可
1.7 React JSX
1.7.1 虚拟DOM
1)React提供了一些API来创建一种 `特别` 的一般js对象
a.var element = React.createElement('h1', {
id:'myTitle'},'hello')
b.上面创建的就是一个简单的虚拟DOM对象
2)虚拟DOM对象最终都会被React转换为真实的DOM
3)我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
1.7.2 JSX
1.全称javascript xml,是react定义的一种类似于XML的JS扩展语法:XML+JS
2.作用:用来创建react虚拟Dom元素/对象
a.var ele = <h1>Hello JSX!</h1>
b.注意1: 它不是字符串, 也不是HTML/XML标签
c.注意2: 它最终产生的就是一个JS对象
3.标签名任意: HTML标签或其它标签
4.标签属性任意: HTML标签属性或其它
5.基本语法规则
a.遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
b.遇到以 {
开头的代码，以JS语法解析: 标签中的js代码必须用{
}包含
6.babel.js的作用
a.浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
b.只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
1.7.3 渲染虚拟Dom元素
1)语法: ReactDOM.render(virtualDOM, containerDOM)
2)作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3)参数说明
a.参数一: 纯js或jsx创建的虚拟dom对象
b.参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
1.7.4 建立虚拟Dom的两种方式
1.纯JS(一般不用)
React.createElement('h1', {
id:'myTitle'}, title)
2.JSX:
<h1 id='myTitle'>{
title}</h1>
1.7.5 练习- - -动态的展示列表数据
<body>
<h2>玄机科技旗下动漫</h2>
<div id="example1"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*
功能: 动态展示列表数据
*/
const names=['秦时明月','天行九歌','斗罗大陆','吞噬星空','天宝伏妖录','武庚纪']
//1.创建虚拟Dom
const ul=(
/**
* 1.当有嵌套的结构时,尽量用小括号把虚拟Dom元素给括起来()
* 2.如何将数据的数组转换成标签的数组?
* 使用数组的map方法
*/
<ul>{
names.map((name,index)=><li key={
index}>{
name}</li>)
}</ul>
)
//2.渲染虚拟Dom
ReactDOM.render(ul,document.getElementById('example1'))
</script>
</body>
1.8 模块与组件/模块化与组件化
1.8.1 模块与组件
//模块
1)理解: 向外提供特定功能的js程序, 一般就是一个js文件
2)为什么: js代码更多更复杂
3)作用: 复用js, 简化js的编写, 提高js运行效率
//组件
1)理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
2)为什么: 一个界面的功能更复杂
3)作用: 复用编码, 简化项目编码, 提高运行效率
1.8.2 模块化与组件化
//模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
//组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
二.React 面向组件编程
1.JS是面向对象编程
2.面向对象(最底层)-->面向模块-->面向组件(最上层)
2.1基本理解和使用(自定义组件component)
//2.1.1 编写注意
1.组件名必须首字母大写
2.虚拟DOM元素只能有一个根元素
3.虚拟DOM元素必须有结束标签
//2.1.2 render渲染组件标签的基本流程
1.React内部会创建组件实例对象
2.得到包含的虚拟DOM并解析为真实DOM
3.插入到指定的页面元素内部
<body>
<div id="example1"></div>
<div id="example2"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//1.定义组件
/*方式1:工厂函数组件(简单组件)*/
function MyComponent(){
return <abbr title="简单组件"><h2>工厂函数组件</h2></abbr>
}
/*方式2:ES6类组件(复杂组件)*/
class MyComponent2 extends React.Component{
render(){
console.log(this) //打印MyComponent的实例对象
return <abbr title="复杂组件"><h2>ES6类组件</h2></abbr>
}
}
//2.渲染组件标签
ReactDOM.render(<MyComponent/>,document.getElementById('example1'))
ReactDOM.render(<MyComponent2/>,document.getElementById('example2'))
</script>
</body>
2.2 组件三大属性：1.state
1 理解
1.state是组件对象最重要的属性, 值是对象(可以包含多个数据)
2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
3.有状态state时,要用ES6类复杂组件;没有state时要用工厂函数组件
<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*
需求: 自定义组件, 功能说明如下
1. 显示h2标题, 初始文本为: I Love you
2. 点击标题更新为: You Love me
*/
//1.定义组件
class Like extends React.Component{
constructor (props) {
super(props)
//初始化状态
this.state = {
isLikeMe : false
}
/*将新增方法中的this强制绑定为组件对象*/
this.handleClick=this.handleClick.bind(this)
}
/*新添加的方法:内部的this默认不是组件对象,而是undefined*/
handleClick(){
//得到状态并取反
const a=!this.state.isLikeMe
//更新状态
this.setState({
isLikeMe:a})
}
/*render是重写组件类的方法*/
render(){
//读取状态
const {
isLikeMe}=this.state
return <h2 onClick={
this.handleClick}>{
isLikeMe?'You Love me':'I Love you'}</h2>
}
}
//2.渲染组件标签
ReactDOM.render(<Like/>,document.getElementById('example'))
</script>
</body>
组件三大属性：2.props
//理解:
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
//作用:
1.通过标签属性从组件外向组件内传递变化的数据
2.注意: 组件内部不要修改props数据
----问题: 区别组件的props和state属性-----
1.state: 组件自身内部可变化的数据
2.props: 从组件外部向组件内部传递数据, 组件内部只读不修改
//组件类的构造函数,查看所有属性
constructor(props){
super(props)
console.log(props)
}
组件三大属性：3.refs与事件处理
---理解:
1.组件内的标签都可以定义ref属性来标识自己
a. this.msgInput = input}/>
b.回调函数在组件初始化渲染完或卸载时自动调用
2.在组件中可以通过this.msgInput来得到对应的真实DOM元素
3.作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据
---事件处理
1.通过onXxx属性指定组件的事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2.通过event.target得到发生事件的DOM元素对象
handleBlur(event){
alert(event.target)
}
----特别注意
1.组件内置的方法中的this为组件对象
2.在组件类中自定义的方法中this为null
a.强制绑定this: 通过函数对象的bind()
b.箭头函数(ES6模块化编码时才能使用)
2.3 组件组合使用
功能界面的组件化编码流程(重点)
1)拆分组件: 拆分界面,抽取组件
2)实现静态组件: 使用组件实现静态页面效果
3)实现动态组件
a.动态显示初始化数据
b.交互功能(从绑定事件监听开始)
2.4 组件生命周期
理解:
1.组件对象从创建到死亡它会经历特定的生命周期阶段
2.React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
3.我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作
生命周期流程图:
-------重要概念-------
1-组件的三个生命周期状态:
* Mount：插入真实 DOM
* Update：被重新渲染
* Unmount：被移出真实 DOM
2-React 为每个状态都提供了勾子(hook)函数
* componentWillMount()
* componentDidMount()
* componentWillUpdate()
* componentDidUpdate()
* componentWillUnmount()
3-生命周期流程:
a.第一次初始化渲染显示: ReactDOM.render()
* constructor(): 创建对象初始化state
* componentWillMount() : 将要插入回调
* render() : 用于插入虚拟DOM回调
* componentDidMount() : 已经插入回调
b.每次更新state: this.setSate()
* componentWillUpdate() : 将要更新回调
* render() : 更新(重新渲染)
* componentDidUpdate() : 已经更新回调
c.移除组件: ReactDOM.unmountComponentAtNode(containerDom)
* componentWillUnmount() : 组件将要被移除回调
4- 重要的勾子
1)render(): 初始化渲染或更新渲染调用
2)componentDidMount(): 开启监听, 发送ajax请求
3)componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
4)componentWillReceiveProps(): 后面需要时讲
2.5 虚拟DOM与DOM diff 算法
基本原理图:
<body>
<div id="example"></div>
<br>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*
验证:
虚拟DOM+DOM Diff算法: 最小化页面重绘
*/
//1.定义组件
class HelloWorld extends React.Component {
constructor(props) {
super(props)
this.state = {
date: new Date()
}
}
componentDidMount () {
setInterval(() => {
this.setState({
date: new Date()
})
}, 1000)
}
render () {
console.log('render()')
return (
<p>
Hello, <input type="text" placeholder="你的名字"/>
<span>It is {
this.state.date.toTimeString()}</span>
</p>
)
}
}
//2.渲染组件标签
ReactDOM.render( <HelloWorld/>,document.getElementById('example'))
</script>
</body>
