React 入门基础
第1章:React入门
1.1.React简介
- 1.英文官网: reactjs.org/
- 2.中文官网: react.docschina.org/
- 3.用于动态构建用户界面的 JavaScript 库(只关注于视图)
- 4.Facebook开源
React的特点
- 1.声明式编码
- 2.组件化编码
- 3.React Native 编写原生应用
- 4.高效(优秀的Diffing算法)
React高效的原因
- 1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
- 2.DOM Diffing算法, 最小化页面重绘。
1.2.React的基本使用
相关js库
- 1.react.js:React核心库。
- 2.react-dom.js:提供操作DOM的react扩展库。
- 3.babel.min.js:解析JSX语法代码转为JS代码的库。
创建虚拟DOM的两种方式
- 1.纯JS方式(一般不用)
- 2.JSX方式
虚拟DOM与真实DOM
- 1.通过一些API来创建一种 “特别” 的一般js对象,例如:
const VDOM = React.createElement('xx',{id:'xx'},'xx')
,这就是一个简单的虚拟DOM对象 - 2.虚拟DOM对象最终都会被React转换为真实的DOM。我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。
1.3.React JSX
JSX
- 1.全称: JavaScript XML
- 2.react定义的一种类似于XML的JS扩展语法: React.createElement(component, props, ...children)方法的语法糖
- 3.作用: 用来简化创建虚拟DOM
- 4.标签名任意: HTML标签或其它标签
- 5.标签属性任意: HTML标签属性或其它
- 6.基本语法规则:
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含
- 7.babel.js的作用
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX,都要加上type="text/babel", 声明需要babel来处理
渲染虚拟DOM(元素)
- 1.语法: ReactDOM.render(virtualDOM, containerDOM)
- 2.作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
- 3.参数说明:
- 参数一: 纯js或jsx创建的虚拟dom对象
- 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
1.2.模块与组件、模块化与组件化的理解
模块和模块化
- 1.理解:向外提供特定功能的js程序, 一般就是一个js文件
- 2.为什么要拆成模块?随着业务逻辑增加,代码越来越多且复杂。
- 3.作用 —— 复用js, 简化js的编写, 提高js运行效率
- 4.当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件和组件化
- 1.理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
- 2.为什么要用组件? 一个界面的功能更复杂
- 3.作用 —— 复用编码, 简化项目编码, 提高运行效率
- 4.当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
第2章:React面向组件编程
2.1 组件三大核心属性之 —— state
- 1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
- 2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
强烈注意
- 1.组件中render方法中的this为组件实例对象
- 2.组件自定义的方法中this为undefined,如何解决?
- 强制绑定this: 通过函数对象的bind()
- 箭头函数
- 3.状态数据,不能直接修改或更新
2.2 组件三大核心属性之 —— props
- 1.每个组件对象都会有props(properties的简写)属性
- 2.组件标签的所有属性都保存在props中
- 3.通过标签属性从组件外向组件内传递变化的数据
- 4.注意 —— 组件内部无法修改props数据
对props中的属性值进行类型限制和必要性限制
// 第一种方式(React v15.5 开始已弃用)
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number
}
// 第二种方式 —— 使用prop-types库进限制(需要引入prop-types库)
class Person extends React.Component{
render(){
const {name,age,sex} = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age 1}</li>
</ul>
)
}
}
//对标签属性进行类型、必要性的限制
Person.propTypes = {
name:PropTypes.string.isRequired, //限制name必传,且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
}
//指定默认标签属性值
Person.defaultProps = {
sex:'男',//sex默认值为男
age:18 //age默认值为18
}
ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('root'))
2.3 组件三大核心属性之 —— refs与事件处理
ref —— 组件内的标签可以定义ref属性来标识自己:
- 1.字符串形式的ref:
<input ref="input1"/>
- 2.回调形式的ref:
<input ref={(val)=>{this.input1 = val}}/>
- 3.createRef创建ref容器:
myRef = React.createRef()
<input ref={this.myRef}/>
事件处理
- 1.通过onXxx属性(例如:onClick)指定事件处理函数(注意大小写)
-
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
-
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
-
- 2.通过event.target得到发生事件的DOM元素对象
受控组件和非受控组件
React 中的受控组件和非受控组件都是针对于表单数据而言的。React 推荐使用受控组件来处理表单数据。 在受控组件中,表单数据由React组件的state管理。在非受控组件中,表单数据交由DOM节点处理,可以使用ref来从 DOM中获取表单数据。
// 受控组件 —— React 的 state 是表单的数据源,并且渲染表单的 React 组件还控制着用户输入过程中表单发生的操作
function Form() {
const [name, setName] = useState('');
const onInputChange = event => setName(event.target.value);
const onFormSubmit = event => {
console.log('提交的数据 => ', name);
event.preventDefault();
};
return (
<form onSubmit={onFormSubmit}>
<label>
名字:
<input type='text' value={name} onChange={onInputChange} />
</label>
<input type='submit' value='提交'/>
</form>
)
}
// 非受控组件 —— 表单元素自己维护 state。可以使用 ref 获取表单数据
function Form() {
const inputElement = useRef(null);
const onFormSubmit = event => {
console.log('提交的数据 => ', inputElement.current.value);
event.preventDefault();
};
return (
<form onSubmit={onFormSubmit}>
<label>
名字:
<input type='text' ref={inputElement} />
</label>
<input type='submit' value='提交'/>
</form>
)
}
2.4 组件的生命周期
理解 React 的生命周期
- 组件从创建到死亡它会经历一些特定的阶段。
- React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
- 我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。
生命周期流程图(旧)
-
- 初始化阶段: 由ReactDOM.render()触发---初次渲染
- 1.constructor()
- 2.componentWillMount()
- 3.render()
- 4.componentDidMount()
-
- 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- 1.shouldComponentUpdate()
- 2.componentWillUpdate()
- 3.render()
- 4.componentDidUpdate()
-
- 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
- 1.componentWillUnmount()
生命周期流程图(新)
-
- 初始化阶段: 由ReactDOM.render()触发---初次渲染
- 1.constructor()
- 2.getDerivedStateFromProps
- 3.render()
- 4.componentDidMount()
-
- 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- 1.getDerivedStateFromProps
- 2.shouldComponentUpdate()
- 3.render()
- 4.getSnapshotBeforeUpdate
- 5.componentDidUpdate()
-
- 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
- 1.componentWillUnmount()
2.5 虚拟DOM与DOM Diffing算法
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekef
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24