文章目录
1. react入门
1.1 介绍描述
-
用于动态构建用户界面的 JavaScript 库(只关注于视图)
-
由Facebook开源
1.2 React的特点
-
声明式编码 区别于命令式编程,它的特点就是我告诉计算机做什么,但是没有告诉你怎么做.
-
组件化编码
-
React Native 编写原生应用
-
高效(优秀的Diffing算法)
1.3 React高效的原因
-
使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
-
DOM Diff算法, 最小化页面重绘。
1.4 相关js库
-
react.js:React核心库。
-
react-dom.js:提供操作DOM的react扩展库。
-
babel.min.js:将jsx语法代码转换为js语法代码
1.5 虚拟dom与真实dom
// jsx 创建虚拟dom
const VDOM = React.createElement('xx',{id:'xx'},'xx')
-
虚拟DOM对象最终都会被React转换为真实的DOM
-
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。
1.6 jsx ( JavaScript XML)
-
react定义的一种类似于XML的JS扩展语法
-
作用: 用来简化创建虚拟DOM
-
写法:var ele =
Hello JSX!
-
注意1:它不是字符串, 也不是HTML/XML标签
-
注意2:它最终产生的就是一个JS对象
-
-
基本语法规则
-
遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
-
遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含
-
1.7 渲染虚拟dom
- 语法
ReactDOM.render(
<App />,
document.getElementById('root')
);
-
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
-
参数说明
-
参数一: 纯js或jsx创建的虚拟dom对象
-
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
-
1.8 案例
需求: 动态展示如下列表
import React, {Component} from 'react';
class App extends Component {
constructor(){
super(...arguments);
this.state = {
allContent: ['vue', 'react', 'angular']
}
}
render() {
return (
<div>
<h1>前端js框架列表</h1>
<ul>
{
this.state.allContent.map((item, index) => (
<li key={index}> {item} </li>
))
}
</ul>
</div>
);
}
}
export default App;
2. react 面向组件编程
2.1 组件三大核心属性 state props refs
1. state
-
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
-
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
注意:
1. 组件中render方法中的this为组件实例对象
-
组件自定义的方法中this为undefined,如何解决?
a) 强制绑定this: 通过函数对象的bind()
b) 箭头函数
-
状态数据,不能直接修改或更新
案例:
需求*😗 定义一个展示天气信息的组件
1. 默认展示天气炎热 或 凉爽
2. 点击文字切换天气
import React, {Component} from 'react';
class App extends Component {
constructor(){
super(...arguments);
this.state = {
isHot: false
}
}
handleClick = () =>{
this.setState({
isHot: !this.state.isHot
})
};
render() {
return (
<div onClick={this.handleClick}>
{this.state.isHot ? 'cold':'hot'}
</div>
);
}
}
export default App;
2. props
作用:用于父子组件传值(父组件传值给子组件)
案例:
1. 姓名必须指定,且为字符串类型;
2. 性别为字符串类型,如果性别没有指定,默认为男
3. 年龄为字符串类型,且为数字类型,默认值为1**8
父组件
import React, {Component} from 'react';
import Person from "./person/Person";
class App extends Component {
constructor(){
super(...arguments);
this.state = {
p1:{
name: 'Tom',
age: 18,
sex: 'male'
}
}
}
render() {
return (
<div>
<Person {...this.state.p1}></Person>
</div>
);
}
}
export default App;
子组件
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class Person extends Component {
// 设置默认值
static defaultProps = {
sex: 'male',
age: 18
};
// 设置值的类型 和限制(PropTypes验证器)
static propTypes = {
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
};
render() {
console.log(this.props);
return (
<div>
<ul>
{
Object.keys(this.props).map((item, index) =>(
<li key={index}> {item} : {this.props[item]}</li>
))
}
</ul>
</div>
);
}
}
export default Person;
3. refs
作用: 组件内的标签通过ref来标识自己
需求: 自定义组件, 功能说明如下:
1. 点击按钮, 提示第一个输入框中的值
2. 当第2个输入框失去焦点时, 提示这个输入框中的值
import React, {Component} from 'react';
class Person extends Component {
handleClick = () =>{
console.log(this.input1.value)
};
handleBlur = (ev)=>{
console.log(ev.target.value)
}
render() {
return (
<div>
回调函数: 参数为标签名,返回自定义名字作为获取的对象
<input type="text" ref={input=>this.input1=input}/>
<button onClick={this.handleClick}>click</button>
<input type="text" onBlur={this.handleBlur}/>
</div>
);
}
}
export default Person;
2.2 事件处理
-
通过onXxx属性指定事件处理函数(注意大小写)
-
React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
-
React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
-
-
通过event.target得到发生事件的DOM元素对象
2.3 表单数据收集
受控组件: 表单数据能自动收集成状态
非受控组件: 需要时手动获取
name 受控
pwd 非受控
import React, {Component} from 'react';
class Person extends Component {
constructor(){
super(...arguments);
this.state = {
pwd:''
}
}
handleClick = (ev) =>{
ev.preventDefault();
const {pwd} = this.state;
console.log({name: this.name.value, pwd})
};
handleInput = (ev) =>{
this.setState({
pwd: ev.target.value
})
};
render() {
return (
<div>
<form action="">
name: <input type="text" ref={input=>this.name=input}/> <br/>
pwd: <input type="text" value={this.state.pwd} onInput={this.handleInput}/> <br/>
<button onClick={this.handleClick}>login</button>
</form>
</div>
);
}
}
export default Person;
2.4 组件生命周期
https://blog.csdn.net/gklcsdn/article/details/109592711
3. 脚手架
-
脚手架: 快速创建一个模板项目
- 包含了所有需要的配置(语法检查、jsx编译、devServer…)
- 下载好了所有相关的依赖
- 可以直接运行一个简单效果
-
react提供了一个用于创建react项目的脚手架库: create-react-app
-
项目的整体技术架构为: react + webpack + es6 + eslint
-
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
3.1 组件化编码流程
-
拆分组件: 拆分界面,抽取组件
-
实现静态组件: 使用组件实现静态页面效果
-
实现动态组件
3.1 动态显示初始化数据
3.1.1 数据类型
3.1.2 数据名称
3.1.2 保存在哪个组件?
3.2 交互(从绑定事件监听开始)
4. 路由
4.1 SPA
-
单页Web应用(single page web application,SPA)。
-
整个应用只有一个完整的页面。
-
点击页面中的链接不会刷新页面,只会做页面的局部更新。
-
数据都需要通过ajax请求获取, 并在前端异步展现。
4.2 路由的理解
一个路由就是一个映射关系(key:value)
后台路由: 用来处理客户端提交的请求并返回相应的数据
前台路由:不同路由对应不同的组件
https://blog.csdn.net/gklcsdn/article/details/109596166
5. redux
3.1.1 数据类型
3.1.2 数据名称
3.1.2 保存在哪个组件?
3.2 交互(从绑定事件监听开始)
4. 路由
4.1 SPA
-
单页Web应用(single page web application,SPA)。
-
整个应用只有一个完整的页面。
-
点击页面中的链接不会刷新页面,只会做页面的局部更新。
-
数据都需要通过ajax请求获取, 并在前端异步展现。
4.2 路由的理解
一个路由就是一个映射关系(key:value)
后台路由: 用来处理客户端提交的请求并返回相应的数据
前台路由:不同路由对应不同的组件
https://blog.csdn.net/gklcsdn/article/details/109596166
5. redux
https://blog.csdn.net/gklcsdn/article/details/109713566