本文围绕React展开，介绍了组件的基本使用，包括函数式与类式组件定义及渲染流程。详细讲解组件三大核心属性state、props、refs与事件处理，还提及收集表单数据方法。阐述组件生命周期，对比新旧流程图及重要、废弃钩子。最后探讨虚拟DOM与DOM Diffing算法，分析key的作用及使用index作key的问题。
一、基本理解和使用
使用 React 开发者工具调试
定义组件
函数式组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_函数式组件</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">
//1.创建函数式组件
function MyComponent(){
console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>
</body>
</html>
执行了ReactDOM.render(<MyComponent/>,document.getElementById('test'))之后
- React 解析组件标签，找到了 MyComponent 组件。
- 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。
类式组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_类式组件</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">
//1.创建类式组件
class MyComponent extends React.Component {
render(){
//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
console.log('render中的this:',this);
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>
</body>
</html>
执行了ReactDOM.render(<MyComponent/>,document.getElementById('test'))之后
- React 解析组件标签，找到了 MyComponent 组件。
- 发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法。
- 将 render 返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。
渲染类组件标签的基本流程
-
React 内部会创建组件实例对象
-
调用 render() 得到虚拟 DOM，并解析为真实 DOM
-
插入到指定的页面元素内部
注意
- 组件名必须首字母大写
- 虚拟 DOM 元素只能有一个根元素
- 虚拟 DOM 元素必须有结束标签
二、组件三大核心属性 1: state
简介
-
state 是组件对象最重要的属性，值是对象（可以包含多个 key-value 的组合）
-
组件被称为”状态机“，通过更新组件的 state 来更新对应的页面显示（重新渲染组件）
代码
需求: 定义一个展示天气信息的组件
1.默认展示天气炎热 或 凉爽
2.点击文字切换天气
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state</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">
//1.创建组件
class Weather extends React.Component{
//构造器调用 1 次
constructor(props){
console.log('constructor');
super(props)
//初始化状态
this.state = {isHot:false,wind:'微风'}
//解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
}
//render调用 1+n 次 1是初始化的那次 n是状态更新的次数
render(){
console.log('render');
//读取状态
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
//changeWeather调用几次？ ———— 点几次调几次
changeWeather(){
//changeWeather放在 Weather的原型对象上，供实例使用
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
console.log('changeWeather');
//获取原来的isHot值
const isHot = this.state.isHot
//严重注意：状态必须通过 setState 进行更新,且更新是一种合并，不是替换。
this.setState({isHot:!isHot})
console.log(this);
//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
//this.state.isHot = !isHot //这是错误的写法
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>
简写方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state简写方式</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">
//1.创建组件
class Weather extends React.Component{
//初始化状态
state = {isHot:false,wind:'微风'}
render(){
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
//自定义方法————要用赋值语句的形式+箭头函数
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>
总结
-
组件中 render 方法中的 this 为组件实例对象
-
组件自定义的方法中 this 为 undefined，如何解决？
a) 强制绑定 this: 通过函数对象的 bind()
b) 箭头函数 -
状态数据，不能直接修改或更新
this.state.isHot = !isHot //这是错误的写法
this.setState({isHot:!isHot}) //状态必须通过 setState 进行更新，且更新是一种合并，不是替换
三、组件三大核心属性 2: props
简介
-
每个组件对象都会有 props（properties的简写）属性
-
组件标签的所有属性都保存在 props 中
作用
-
通过标签属性从组件外向组件内传递变化的数据
-
注意：组件内部不要修改 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: PropTypes.number. } -
扩展属性: 将对象的所有属性通过props传递
<Person {...person}/> -
默认属性值
Person.defaultProps = { age: 18, sex:'男' } -
组件类的构造函数
constructor(props){ super(props) console.log(props)//打印所有属性 }
代码
需求: 自定义用来显示一个人员信息的组件
1.姓名必须指定，且为字符串类型；
2.性别为字符串类型，如果性别没有指定，默认为男
3.年龄为字符串类型，且为数字类型，默认值为18
- props基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props基本使用</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<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>
<script type="text/babel">
//创建组件
class Person extends React.Component{
render(){
// console.log(this);
const {name,age,sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age+1}</li>
</ul>
)
}
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry" age={19} sex="男"/>,document.getElementById('test1'))
ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))
const p = {name:'老刘',age:18,sex:'女'}
// console.log('@',...p);
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
</script>
</body>
</html>
-
对props进行限制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对props进行限制</title> </head> <body> <!-- 准备好一个“容器” --> <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"> //创建组件 class Person extends React.Component{ render(){ // console.log(this); const {name,age,sex} = this.props //props是只读的 //this.props.name = 'jack' //此行代码会报错，因为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为数值 speak:PropTypes.func,//限制speak为函数 } //指定默认标签属性值 Person.defaultProps = { sex:'男',//sex默认值为男 age:18 //age默认值为18 } //渲染组件到页面 ReactDOM.render(<Person name={100} speak={speak}/>,document.getElementById('test1')) ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2')) const p = {name:'老刘',age:18,sex:'女'} // console.log('@',...p); // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3')) ReactDOM.render(<Person {...p}/>,document.getElementById('test3')) function speak(){ console.log('我说话了'); } </script> </body> </html> -
props的简写方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>props的简写方式</title> </head> <body> <!-- 准备好一个“容器” --> <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"> //创建组件 class Person extends React.Component{ constructor(props){ //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props // console.log(props); super(props) console.log('constructor',this.props); } //对标签属性进行类型、必要性的限制 static propTypes = { name:PropTypes.string.isRequired, //限制name必传，且为字符串 sex:PropTypes.string,//限制sex为字符串 age:PropTypes.number,//限制age为数值 } //指定默认标签属性值 static defaultProps = { sex:'男',//sex默认值为男 age:18 //age默认值为18 } render(){ // console.log(this); const {name,age,sex} = this.props //props是只读的 //this.props.name = 'jack' //此行代码会报错，因为props是只读的 return ( <ul> <li>姓名：{name}</li> <li>性别：{sex}</li> <li>年龄：{age+1}</li> </ul> ) } } //渲染组件到页面 ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1')) </script> </body> </html> -
函数组件使用props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数组件使用props</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<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">
//创建组件
function Person (props){
const {name,age,sex} = props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</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="jerry"/>,document.getElementById('test1'))
</script>
</body>
</html>
四、组件三大核心属性 3: refs 与事件处理
简介
组件内的标签可以定义 ref 属性来标识自己（类似标签中的 id 属性唯一标识一个标签）
编码操作
-
字符串形式的 ref
<input ref="input1"/> -
回调形式的 ref
<input ref={(c)=>{this.input1 = c}} /> -
createRef 创建 ref 容器
myRef = React.createRef()
<input ref={this.myRef}/>
代码
- 字符串形式的 ref
<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">
//创建组件
class Demo extends React.Component{
//展示左侧输入框的数据
showData = ()=>{
const {input1} = this.refs
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const {input2} = this.refs
alert(input2.value)
}
render(){
return(
<div>
<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>
</body>
- 回调形式的 ref
<script type="text/babel">
//创建组件
class Demo extends React.Component{
//展示左侧输入框的数据
showData = ()=>{
const {input1} = this
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const {input2} = this
alert(input2.value)
}
render(){
return(
<div>
<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>
- createRef 创建 ref 容器
<script type="text/babel">
//创建组件
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>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>
事件处理
- 通过 onXxx 属性指定事件处理函数(注意大小写)
1）React使用的是自定义（合成）事件, 而不是使用的原生 DOM 事件
2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
- 通过 event.target 得到发生事件的 DOM 元素对象
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component {
myRef = React.createRef()
showData = () => {
alert(this.myRef.current.value)
}
showData2 = (event) => {
alert(event.target.value)
}
render() {
return (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧数据</button>
<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<Demo/>, document.getElementById("test"));
</script>
</body>
五、收集表单数据
需求
输入用户名和密码后，点击登录提示输入信息
理解
包含表单的组件分类
- 受控组件：页面中所有输入类的 DOM ，随着输入将输入的值维护到 状态（state）中，需要用时从状态（state）中取出，这就是受控组件。类似vue中的双向数据绑定（可以省略 ref）
- 非受控组件：现用现取
建议使用受控组件，因为可以省略 ref
代码
非受控组件代码
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Login extends React.Component {
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const {username, password} = this
alert(`你的用户名是：${username.value}，你的密码是：${password.value}`)
}
render() {
return (
<form action="" onSubmit={this.handleSubmit}>
用户名：<input ref={c => this.username = c} type="text" name="username" />
密码：<input ref={c => this.password = c} type="password" name="password" />
<button>登录</button>
</form>
);
}
}
ReactDOM.render(<Login/>, document.getElementById("test"));
</script>
</body>
受控组件代码
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Login extends React.Component {
// 初始化状态
state = {
username: '',
password: ''
}
saveUsername = (event) => {
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 action="" onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveUsername} type="text" name="username" />
密码：<input onChange={this.savePassword} type="password" name="password" />
<button>登录</button>
</form>
);
}
}
ReactDOM.render(<Login/>, document.getElementById("test"));
</script>
</body>
拓展
函数的柯里化
通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
function sum(a){
return(b)=>{
return (c)=>{
return a+b+c
}
}
}
// 调用
sum(1)(2)(3)
高阶函数
如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component {
// 初始化状态
state = {
username: '',
password: ''
}
// saveFormData是高阶函数，符合上面的第二条
// saveFormData使用了函数的柯里化
saveFormData = (dataType) => {
return (event) => {
this.setState({[dataType]: event.target.value})
}
}
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const {username, password} = this.state
alert(`你的用户名是：${username}，你的密码是：${password}`)
}
render() {
return (
<form action="" onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveFormData('username')} type="text" name="username" />
密码：<input onChange={this.saveFormData('password')} type="password" name="password" />
<button>登录</button>
</form>
);
}
}
ReactDOM.render(<Login/>, document.getElementById("test"));
</script>
</body>
不用函数柯里化实现
<script type="text/babel">
class Login extends React.Component {
// 初始化状态
state = {
username: '',
password: ''
}
saveFormData = (dataType,event) => {
this.setState({[dataType]: event.target.value})
}
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const {username, password} = this.state
alert(`你的用户名是：${username}，你的密码是：${password}`)
}
render() {
return (
<form action="" onSubmit={this.handleSubmit}>
用户名：<input onChange={event => this.saveFormData('username',event)} type="text" name="username" />
密码：<input onChange={event => this.saveFormData('password',event)} type="password" name="password" />
<button>登录</button>
</form>
);
}
}
ReactDOM.render(<Login/>, document.getElementById("test"));
</script>
六、组件的生命周期
理解
-
组件从创建到死亡它会经历一些特定的阶段。
-
React组件中包含一系列钩子函数（生命周期回调函数）, 会在特定的时刻调用。
-
我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
生命周期流程图（旧）
1、初始化阶段
由 ReactDOM.render()触发，初次渲染
-
constructor：构造器
-
componentWillMount：组件将要挂载的钩子
-
render：渲染虚拟DOM
-
componentDidMount：组件挂载完毕的钩子（常用）
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2、更新阶段
由组件内部 this.setState()或父组件更新 render 触发
-
componentWillReceiveProps：组件将要接收新的props的钩子 (子组件通过父组件更新时触发，注意初次渲染不会触发)
-
shouldComponentUpdate：控制组件更新的“阀门”，组件是否应该更新的钩子
-
componentWillUpdate：组件将要更新的钩子
-
render：渲染虚拟DOM
-
componentDidUpdate：组件更新完毕的钩子
3、卸载组件
由 ReactDOM.unmountComponentAtNode() 触发
-
componentWillUnmount：组件将要卸载的钩子（常用）
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
生命周期流程图（旧）演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_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">
//创建组件
class Count extends React.Component{
//构造器
constructor(props){
console.log('Count---constructor');
super(props)
//初始化状态
this.state = {count:0}
}
//加1按钮的回调
add = ()=>{
//获取原状态
const {count} = this.state
//更新状态
this.setState({count:count+1})
}
//卸载组件按钮的回调
death = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}
//组件将要挂载的钩子
componentWillMount(){
console.log('Count---componentWillMount');
}
//组件挂载完毕的钩子
componentDidMount(){
console.log('Count---componentDidMount');
}
//组件将要卸载的钩子
componentWillUnmount(){
console.log('Count---componentWillUnmount');
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('Count---shouldComponentUpdate');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('Count---componentWillUpdate');
}
//组件更新完毕的钩子
componentDidUpdate(){
console.log('Count---componentDidUpdate');
}
render(){
console.log('Count---render');
const {count} = this.state
return(
<div>
<h2>当前求和为：{count}</h2>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
</div>
)
}
}
//父组件A
class A extends React.Component{
//初始化状态
state = {carName:'奔驰'}
changeCar = ()=>{
this.setState({carName:'奥拓'})
}
render(){
return(
<div>
<div>我是A组件</div>
<button onClick={this.changeCar}>换车</button>
<B carName={this.state.carName}/>
</div>
)
}
}
//子组件B
class B extends React.Component{
//组件将要接收新的props的钩子
componentWillReceiveProps(props){
console.log('B---componentWillReceiveProps',props);
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('B---shouldComponentUpdate');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('B---componentWillUpdate');
}
//组件更新完毕的钩子
componentDidUpdate(){
console.log('B---componentDidUpdate');
}
render(){
console.log('B---render');
return(
<div>我是B组件，接收到的车是:{this.props.carName}</div>
)
}
}
//渲染组件
ReactDOM.render(<Count/>,document.getElementById('test'))
</script>
</body>
</html>
生命周期流程图（新）
1、初始化阶段
由ReactDOM.render()触发—初次渲染
-
constructor：构造器
-
getDerivedStateFromProps：若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps（不建议使用）
-
render：渲染虚拟DOM
-
componentDidMount：组件挂载完毕的钩子（常用）
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2、更新阶段
由组件内部this.setState()或父组件重新render触发
-
getDerivedStateFromProps：若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps（不建议使用）
-
shouldComponentUpdate：控制组件更新的“阀门”，组件是否应该更新的钩子
-
render：渲染虚拟DOM
-
getSnapshotBeforeUpdate：在更新之前获取快照的钩子（很少使用）
-
componentDidUpdate：组件更新完毕的钩子
3、卸载组件
由ReactDOM.unmountComponentAtNode()触发
-
componentWillUnmount：组件将要卸载的钩子（常用）
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3_react生命周期(新)</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
<script type="text/babel">
//构造器
constructor(props){
console.log('Count---constructor');
super(props)
//初始化状态
this.state = {count:0}
}
//加1按钮的回调
add = ()=>{
//获取原状态
const {count} = this.state
//更新状态
this.setState({count:count+1})
}
//卸载组件按钮的回调
death = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}
//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
static getDerivedStateFromProps(props,state){
console.log('getDerivedStateFromProps',props,state);
return null
}
//在更新之前获取快照
getSnapshotBeforeUpdate(){
console.log('getSnapshotBeforeUpdate');
return 'atguigu'
}
//组件挂载完毕的钩子
componentDidMount(){
console.log('Count---componentDidMount');
}
//组件将要卸载的钩子
componentWillUnmount(){
console.log('Count---componentWillUnmount');
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('Count---shouldComponentUpdate');
return true
}
//组件更新完毕的钩子
componentDidUpdate(preProps,preState,snapshotValue){
console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
}
render(){
console.log('Count---render');
const {count} = this.state
return(
<div>
<h2>当前求和为：{count}</h2>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
</div>
)
}
}
//渲染组件
ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
</script>
</body>
</html>
重要的钩子
-
render：初始化渲染或更新渲染调用
-
componentDidMount：开启监听, 发送ajax请求
-
componentWillUnmount：做一些收尾工作, 如: 清理定时器
即将废弃的勾子
-
componentWillMount
-
componentWillReceiveProps
-
componentWillUpdate
现在使用会出现警告，需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。
虚拟 DOM 与 DOM Diffing 算法
经典面试题:
1). react/vue 中的 key 有什么作用？（key的内部原理是什么？）
2). 为什么遍历列表时，key 最好不要用 index?
1答：
虚拟 DOM 中 key 的作用：
简单的说：key 是虚拟 DOM 对象的标识, 在更新显示时 key 起着极其重要的作用。
详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟 DOM】, 随后 React 进行【新虚拟 DOM】与【旧虚拟DOM】的 diff 比较，比较规则如下：
a. 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：
(1).若虚拟 DOM 中内容没变, 直接使用之前的真实 DOM
(2).若虚拟 DOM 中内容变了, 则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM
b. 旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key
根据数据创建新的真实 DOM，随后渲染到到页面
2答：
用 index 作为 key 可能会引发的问题：
-
若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实 DOM 更新 （ 界面效果没问题, 但效率低）。
- 如果结构中还包含输入类的 DOM，会产生错误DOM更新（界面有问题）。
- 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。
演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2_key的作用</title>
</head>
<body>
<div id="test"></div>
<script src="../js/17.0.1/react.development.js"></script>
<script src="../js/17.0.1/react-dom.development.js"></script>
<script src="../js/17.0.1/babel.min.js"></script>
<script type="text/babel">
class Person extends React.Component {
state = {
persons: [
{"id": 1, "name": "小张","age": 18},
{"id": 2, "name": "小李","age": 19},
]
}
add = () => {
const {persons} = this.state;
const p = {"id": persons.length+1, "name": "小王","age": 20};
this.setState({persons: [p, ...persons]});
}
render() {
return (
<div>
<h1>人员信息</h1>
<button onClick={this.add}>新增人员信息</button>
<h3>使用index作为key</h3>
<ul>
{this.state.persons.map((personObj, index) => {
return <li key={index}>{personObj.name}----{personObj.age}<input type="text"/></li>
})}
</ul>
<hr/>
<hr/>
<h3>使用id作为key</h3>
<ul>
{this.state.persons.map((personObj) => {
return <li key={personObj.id}>{personObj.name}----{personObj.age}<input type="text"/></li>
})}
</ul>
</div>
)
}
}
ReactDOM.render(<Person/>, document.getElementById("test"));
</script>
</body>
</html>
使用index索引值作为key
初始数据：
{id:1,name:‘小张’,age:18},
{id:2,name:‘小李’,age:19},
初始的虚拟DOM：
<li key=0>小张---18<input type="text"/></li>
<li key=1>小李---19<input type="text"/></li>
更新后的数据：
{id:3,name:‘小王’,age:20},
{id:1,name:‘小张’,age:18},
{id:2,name:‘小李’,age:19},
更新数据后的虚拟DOM：
<li key=0>小王---20<input type="text"/></li>
<li key=1>小张---18<input type="text"/></li>
<li key=2>小李---19<input type="text"/></li>
使用 id 作为唯一标识 key
初始数据：
{id:1,name:‘小张’,age:18},
{id:2,name:‘小李’,age:19},
初始的虚拟DOM：
<li key=1>小张---18<input type="text"/></li>
<li key=2>小李---19<input type="text"/></li>
更新后的数据：
{id:3,name:‘小王’,age:20},
{id:1,name:‘小张’,age:18},
{id:2,name:‘小李’,age:19},
更新数据后的虚拟DOM：
<li key=3>小王---20<input type="text"/></li>
<li key=1>小张---18<input type="text"/></li>
<li key=2>小李---19<input type="text"/></li>
总结
从上面的演示代码，可以看出使用 index 索引值作为 key 时，每次增加数据都需要渲染所有的虚拟 DOM，因为新增的数据是在最前面增加，即每次新增key为0对应的都是新增的数据，从而导致其他的列表中的 key 发生变化，且如果后面的输入框中有内容会导致更新后的内容错位。
而使用 id 作为唯一标识 key 时，则没有上述问题。
扫一扫
1340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
