本文详细介绍了React的基础知识，包括React的特点、基本使用、组件化编程、组件的三大属性（state、props、refs）以及事件处理、表单数据收集。深入探讨了React的模块化和组件化思想，同时涵盖了高阶函数和组件生命周期的概念。
React基础
一、React简介
1. React官网
-
英文官网: https://reactjs.org/
2. 什么是React？
-
用于动态构建用户界面的 JavaScript 库(只关注于视图)
-
由Facebook开发，且开源
3. React的特点
-
声明式编码
-
组件化编码
-
React Native 编写原生应用
-
高效（使用虚拟DOM和优秀的Diffing算法）
4. React高效的原因
-
使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
-
DOM Diffing算法, 最小化页面重绘。
二、React的基本使用
1. 创建第一个vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel"> {/* 此处一定要写babel */}
// 1. 创建虚拟DOM
const VDOM = <h1>Hello,React!</h1> {/* 此处一定要不要写引号，因为不是字符串 */}
// 2. 渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
2. 相关js库
-
react.js：React核心库。
-
react-dom.js：提供操作DOM的react扩展库。
-
babel.min.js：解析JSX语法代码转为JS代码的库。
3. 创建虚拟DOM的两种方式
-
纯JS方式（一般不用）
const VDOM = React.createElementById('h1',{id:'title'},React.createElement('span',{},'Hello,React!')) -
JSX方式
const VDOM = <h1 id="title"><span>Hello,React!</span></h1> // 或者： const VDOM = ( <h1 id="title"> <span>Hello,React!</span> </h1> )
4. 虚拟DOM与真实DOM
-
React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM = React.createElement('xx',{id:'xx'},'xx')- 上面创建的就是一个简单的虚拟DOM对象（本质是Object类型的对象）
-
虚拟DOM对象最终都会被React转换为真实的DOM
-
我们编码时基本只需要操作react的虚拟DOM相关数据，react会转换为真实DOM变化而更新界面。
5. JSX
-
全称：JavaScript XML
-
react定义的一种类似于XML的JS扩展语法: JS + XML本质是
React.createElement(component, props, ...children)方法的语法糖 -
作用：用来简化创建虚拟DOM
- 写法：
var ele = <h1>Hello JSX!</h1> - 注意1：它不是字符串, 也不是HTML/XML标签
- 注意2：它最终产生的就是一个JS对象
- 写法：
-
标签名任意：HTML标签或其它标签
-
标签属性任意：HTML标签属性或其它
-
基本语法规则
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
- 定义虚拟DOM时，不要写引号
- 标签中混入JS表达式时要用{}
- 样式的类名指定不要用class，要用className
- 内联样式，要用
style={{key:value}}的形式去写 - 只有一个根标签
- 标签必须闭合
- 标签首字母
- 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
- 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
-
babel.js的作用
- 浏览器不能直接解析JSX代码，需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上
type="text/babel"， 声明需要babel来处理
三、模块与组件、模块化与组件化的理解
1. 模块
-
理解：向外提供特定功能的js程序, 一般就是一个js文件。
-
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
-
作用：复用js, 简化js的编写, 提高js运行效率。
2. 组件
-
理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
-
为什么要用组件： 一个界面的功能更复杂
-
作用：复用编码, 简化项目编码, 提高运行效率
3. 模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
4. 组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
四、React面向组件编程
1. 函数式组件
<script type="text/babel">
console.log(this); {/* 此处的this是undefined，因为babel编译后开启了严格模式 */}
// 1. 创建函数式组件
function MyComponent() {
return <h2>我是用函数定义的组件（适用于 简单组件 的定义）</h2>
}
// 2. 渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
{/*
执行了ReactDOM.render(<MyComponent/>...)之后，发生了什么？
1. React解析组件标签，找到了MyComponent组件。
2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/}
</script>
2. 类式组件
<script type="text/babel">
console.log('render中的this:', this); {/* this就是MyComponent的实例对象（MyComponent组件实例对象）*/}
// 1. 创建类式组件
class MyComponent extends React.Component {
// render是放在类（MyComponent）的原型对象上，供实例使用
render() {
return <h2>我是用类定义的组件（适用于 复杂组件 的定义）</h2>
}
}
// 2. 渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
{/*
执行了ReactDOM.render(<MyComponent/>...)之后，发生了什么？
1. React解析组件标签，找到了MyComponent组件
2. 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
3. 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中
*/}
</script>
3. 注意
-
组件名必须首字母大写
-
虚拟DOM元素只能有一个根元素
-
虚拟DOM元素必须有结束标签
4. 渲染类组件标签的基本流程
-
React内部会创建组件实例对象
-
调用render()得到虚拟DOM, 并解析为真实DOM
-
插入到指定的页面元素内部
五、组件三大核心属性
1. state
-
理解
-
state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)
-
组件被称为"状态机"，通过更新组件的state来更新对应的页面显示(重新渲染组件)
// 开发中一般不用这种写法 <script type="text/babel"> // 1. 创建类式组件 class Weather extends React.Component { // 构造器调1次 constructor(props) { super(props) // 初始化状态 this.state = { isHot: false } // 解决changeWeather中this指向问题 this.changeWeather = this.changeWeather.bind(this) } // render是放在类的原型对象上，供实例使用 // render调 1+n 次，1是初始化那次，n是状态更新的次数 render() { // 读取状态 const {isHot} = this.state return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1> } // changeWeather点几次调几次 changeWeather() { /* 通过Weather实例调用changeWeather时，changeWeather中的this就是Weather实例 但由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined */ console.log(this); // Weather实例 // 严重注意：状态（state）不可直接更改 //this.state.isHot = !isHot // 这是错误的写法 // 状态必须通过setState进行更新，且更新是一种合并，不是替换 this.setState({isHot: !isHot}) // 这是正确的写法 } } // 2. 渲染组件到页面 ReactDOM.render(<Weather/>,document.getElementById('test')) </script>// 精简写法： <script type="text/babel"> // 1. 创建类式组件 class Weather extends React.Component { // 初始化状态 state = { isHot: false, wind: '微风' } render() { const {isHot, wind} = this.state return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}, {wind}</h1> } // 自定义方法——要用赋值语句的形式+箭头函数 changeWeather = () => { const isHot = this.state.isHot this.setState({isHot: !isHot}) } } // 2. 渲染组件到页面 ReactDOM.render(<Weather/>,document.getElementById('test')) </script> -
-
强烈注意
-
组件中render方法中的this为组件实例对象
-
组件自定义的方法中this为undefined，如何解决？
- 强制绑定this: 通过函数对象的bind()
- 箭头函数
-
状态数据，不能直接修改或更新
-
2. props
-
理解：
- 每个组件对象都会有props(properties的简写)属性
- 组件标签的所有属性都保存在props中
<!-- 准备好一个容器 --> <div id="test1"></div> <div id="test2"></div> <div id="test3"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="./js/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM --> <script type="text/javascript" src="./js/react-dom.development.js"></script> <!-- 引入babel，用于将jsx转为js --> <script type="text/javascript" src="./js/babel.min.js"></script> <!-- 引入prop-types，用于对组件标签属性进行限制 --> <script type="text/javascript" src="./js/prop-types.js"></script> <script type="text/babel"> // 1. 创建类式组件 class Person extends React.Component { //简写 // 对标签属性进行类型、必要性的限制 static propTypes = { name: PropTypes.string.isRequired, // 设置姓名必须指定，且为字符串类型 sex: PropTypes.string, // 设置性别为字符串类型 age: PropTypes.number, // 设置年龄为数字类型 speak: PropTypes.func // 设置speak为函数 } // 指定默认标签属性值 static defaultProps = { sex: '男', // 设置性别默认为男 age: 18 // 设置年龄默认值为18 } render() { const { name, age, sex} = this.props // this.props.name = '张三' // 报错，因为props是只读的 return ( <ul> <li>姓名：{name}</li> <li>性别：{sex}</li> <li>年龄：{age+1}</li> </ul> ) } } {/* 一般使用上面那种简单写法 // 对标签属性进行类型、必要性的限制 Person.propTypes = { name: PropTypes.string.isRequired, // 设置姓名必须指定，且为字符串类型 sex: PropTypes.string, // 设置性别为字符串类型 age: PropTypes.number, // 设置年龄为数字类型 speak: PropTypes.func // 设置speak为函数 } // 指定默认标签属性值 Person.defaultProps = { sex: '男', // 设置性别默认为男 age: 18 // 设置年龄默认值为18 } */} // 2. 渲染组件到页面 ReactDOM.render(<Person name="Jerry" sex="女" age={18}/>,document.getElementById('test2')) ReactDOM.render(<Person name="Jack" speak={speak}/>,document.getElementById('test3')) const p = {name:"tom", sex:"男", age:20} {/* react+babel可以允许展开运算符展开一个对象（仅适用于标签属性的传递） */} {/* ReactDOM.render(<Person name="tom" sex="男" age="20"/>,document.getElementById('test')) */} ReactDOM.render(<Person {...p}/>,document.getElementById('test1')) function speak() { console.log('I can speak!'); } </script> -
作用
-
通过标签属性从组件外向组件内传递变化的数据
-
注意：组件内部不要修改props数据
-
编码操作
-
内部读取某个属性值：
this.props.name -
对props中的属性值进行类型限制和必要性限制
-
第一种方式（React v15.5 开始已弃用）
Person.propTypes = { name: React.PropTypes.string.isRequired, age: React.PropTypes.number } -
第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）
Person.propTypes = { name: PropTypes.string.isRequired, age: React.PropTypes.number }
-
-
扩展属性: 将对象的所有属性通过props传递
<Person {...p}/> -
默认属性值
Person.defaultProps = { sex: '男', // 设置性别默认为男 age: 18 // 设置年龄默认值为18 } -
组件类的构造函数
constructor(props) { // 构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props，不传的话拿到的this.props值是undefined super(props) console.log(props) // 打印所有属性 }
-
-
-
函数式组件使用props
function Person(props) { const {name,sex,age} = props return ( <ul> <li>姓名：{name}</li> <li>性别：{sex}</li> <li>年龄：{age}</li> </ul> ) } // 对标签属性进行类型、必要性的限制 Person.propTypes = { name: PropTypes.string.isRequired, // 设置姓名必须指定，且为字符串类型 sex: PropTypes.string, // 设置性别为字符串类型 age: PropTypes.number, // 设置年龄为数字类型 } // 指定默认标签属性值 Person.defaultProps = { sex: '男', // 设置性别默认为男 age: 18 // 设置年龄默认值为18 } ReactDOM.render(<Person name="Jerry"/>,document.getElementById('test1'))
3. refs
组件内的标签可以定义ref属性来标识自己
1. 字符串形式的ref
<input ref="input1" />
<script type="text/babel">
// 1. 创建类式组件
class Demo extends React.Component {
// 展示左侧输入框的数据
showData = () => {
console.log(this.refs.input1); // <input type="text" placeholder="点击按钮提示数据">
const {input1} = this.refs // 对象解构
alert(input1.value)
}
// 展示右侧输入框的数据
showData2 = () => {
const {input2} = this.refs // 对象解构
alert(input2.value)
}
render() {
return(
<div>
{/* 1. 字符串形式的ref */}
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点位提示左侧的数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>
2. 回调形式的ref
<input ref={ (c) => {this.input1 = c} }>
<script type="text/babel">
// 1. 创建类式组件
class Demo extends React.Component {
// 展示左侧输入框的数据
showData = () => {
console.log(this); // <input type="text" placeholder="点击按钮提示数据">
const {input1} = this
alert(input1.value)
}
// 展示右侧输入框的数据
showData2 = () => {
const {input2} = this
alert(input2.value)
}
render() {
return(
<div>
{/* 2. 回调形式的ref */}
<input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点位提示左侧的数据</button>
<input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>
-
如果
ref回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。<script type="text/babel"> // 1. 创建类式组件 class Demo extends React.Component { state = { isHot: true } // 展示输入框的数据 showInfo = () => { const {input1} = this alert(input1.value) } // 切换天气 changeWeather = () => { // 获取原来的状态 const {isHot} = this.state // 更新状态 this.setState({isHot:!isHot}) } saveInput = (c) => { this.input1 = c console.log(c); } render() { const {isHot} = this.state return( <div> <h2>今天天气很{isHot ? '炎热' : '凉爽'}</h2> {/* <input ref={(c) => {this.input1 = c;console.log(c);}} type="text" */} <input ref={this.saveInput} type="text"/> <button onClick={this.showInfo}>点我提示输入的数据</button> <button onClick={this.changeWeather}>点我切换天气</button> </div> ) } } ReactDOM.render(<Demo/>,document.getElementById('test')) </script>
3. createRef创建ref容器
myRef = React.createRef()
class Demo extends React.Component {
// React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用”的
myRef = React.createRef()
myRef2 = React.createRef()
showData = () => {
alert(this.myRef.current.value)
}
showData2 = () => {
alert(this.myRef2.current.value)
}
render() {
return(
<div>
{/* 3. createRef创建ref容器 */}
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示输入的数据</button>
<input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
六、事件处理
-
通过onXxx属性指定事件处理函数(注意大小写)
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件——为了更好的兼容性
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)——为了高效
-
通过event.target得到发生事件的DOM元素对象——不要过度使用ref
/* showData2 = () => { alert(this.myRef2.current.value) } */ showData2 = (event) => { alert(event.target.value) } render() { return( <div> {/* <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /> */} <input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /> </div> ) }
七、React中收集表单数据
1. 非受控组件
class Login extends React.Component {
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const {username,password} = this
alert(`你输入的用户名是：${username.value}, 你输入的密码是：${password.value}`)
}
render() {
return(
<form onSubmit={this.handleSubmit}>
用户名：<input ref={c => this.username = c} type="text" name="username" />
密码：<input ref={c => this.password = c} type="text" name="password" />
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
2. 受控组件
class Login extends React.Component {
// 初始化状态
state = {
username: '',
password: ''
}
// 保存用户名到状态中
saveUsername = (event) => {
// console.log(event.target.value)
this.setState({username:event.target.value})
}
// 保存密码到状态中
savePassword = (event) => {
this.setState({password:event.target.value})
}
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const {username,password} = this.state
alert(`你输入的用户名是：${username}，你输入的密码是：${password}`)
}
render() {
return(
<form onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveUsername} type="text" name="username" />
密码：<input onChange={this.savePassword} type="text" name="password" />
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
八、高阶函数
1. 高阶函数
-
概念：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
- 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
- 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数
-
常见的高阶函数有：Promise、setTimeout、arr.map()等
2. 函数的柯里化
概念：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式（如下这种形式就是函数的柯里化）
function sum(a) {
return(b) => {
return© => {
return a+b+c
}
}
}
下面这个案例中saveFormatDate就是一个高阶函数
class Login extends React.Component {
// 初始化状态
state = {
username: '',
password: ''
}
// 保存表单数据到状态中
saveFormatDate = (dataType) => {
// console.log(event.target.value)
return (event) => {
this.setState({[dataType]: event.target.value})
}
}
// 不使用函数的柯里化写法：
/* saveFormatDate = (dataType,event) => {
this.setState({[dataType]: event.target.value})
} */
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const { username, password } = this.state
alert(`你输入的用户名是：${username}，你输入的密码是：${password}`)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveFormatDate('username')} type="text" name="username" />
密码：<input onChange={this.saveFormatDate('password')} type="text" name="password" />
<button>登录</button>
</form>
// 不使用函数的柯里化写法：
/* <form onSubmit={this.handleSubmit}>
用户名：<input onChange={event => this.saveFormatDate('username',event)} type="text" name="username" />
密码：<input onChange={event => this.saveFormatDate('password',event)} type="text" name="password" />
<button>登录</button>
</form> */
)
}
}
ReactDOM.render(<Login />, document.getElementById('test'))
九、组件的生命周期
1. 生命周期的三个阶段（旧）
-
初始化阶段：由ReactDOM.render()触发—初次渲染
-
constructor()
-
componentWillMount()
-
render()
-
componentDidMount()
-
-
更新阶段：由组件内部this.setSate()或父组件重新render触发
-
shouldComponentUpdate()
-
componentWillUpdate()
-
render()
-
componentDidUpdate()
-
-
卸载组件：由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount()
2. 生命周期的三个阶段（新）
-
初始化阶段：由
ReactDOM.render()触发—初次渲染-
constructor()
-
getDerivedStateFromProps
-
render()
-
componentDidMount()
-
-
更新阶段：由组件内部
this.setSate()或父组件重新render触发-
getDerivedStateFromProps
-
shouldComponentUpdate()
-
render()
-
getSnapshotBeforeUpdate
-
componentDidUpdate()
-
-
卸载组件：由
ReactDOM.unmountComponentAtNode()触发- componentWillUnmount()
扫一扫
2341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
