react--学习笔记7（受控组件和非受控组件和组件的生命周期----虚拟DOM与DOM Diff算法）

最新推荐文章于 2023-12-18 10:36:31 发布

ABU_MOlI_ITUI

最新推荐文章于 2023-12-18 10:36:31 发布

阅读量180

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/107972535

版权

react 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

组件的生命周期：

eg：<h2 style={{opacity:opacity}}>{this.props.msg}</h2>中，外层{}指的是这里放js代码，内层{}指的是放入js对象

1.理解：

组件对象从创建到死亡它会经历特定的生命周期阶段
React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

2.生命周期流程图

3.生命周期详述

组件的三个生命周期状态:

* Mount：插入真实 DOM

* Update：被重新渲染

* Unmount：被移出真实 DOM

React 为每个状态都提供了勾子(hook)函数

* componentWillMount()

* componentDidMount()

* componentWillUpdate()

* componentDidUpdate()

* componentWillUnmount()

生命周期流程:
1. 第一次初始化渲染显示: ReactDOM.render()

* constructor(): 创建对象初始化state

* componentWillMount() : 将要插入回调

* render() : 用于插入虚拟DOM回调

* componentDidMount() : 已经插入回调

1. 每次更新state: this.setSate()

* componentWillUpdate() : 将要更新回调

* render() : 更新(重新渲染)

* componentDidUpdate() : 已经更新回调

1. 移除组件: ReactDOM.unmountComponentAtNode(containerDom)

* componentWillUnmount() : 组件将要被移除回调

4.重要的勾子

render(): 初始化渲染或更新渲染调用
componentDidMount(): 开启监听, 发送ajax请求
componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
componentWillReceiveProps(): 后面需要时讲

Hbuilder编写：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组件的生命周期</title>
	</head>
	<body><div id="test"></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/prop-types.js"></script>
		<script type="text/javascript" src="js/babel.min.js"></script>
		<script type="text/babel">
			/*
			 *需求: 自定义组件
             1. 让指定的文本做显示/隐藏的渐变动画
             2. 切换持续时间为2S
             3. 点击按钮从界面中移除组件界面
			 * */
			class Life extends React.Component{
				constructor (props){
					super(props)
					//初始化值
					this.state={
						opacity:1
					}
					this.distroyComponent=this.distroyComponent.bind(this)
				}
				distroyComponent(){
					//清理定时
					ReactDOM.unmountComponentAtNode(document.getElementById('test'))
				}
				componentDidMount(){
					//启动循环定时器
					this.intervalId=setInterval(function(){
						let {opacity}=this.state
						opacity -= 0.1
						if(opacity<=0){
							opacity=1
						}
						this.setState({opacity})
					}.bind(this),200)
				}
				componentWillUnmount(){
					//清理定时器
					clearInterval(this.intervalId)
				}
				render(){
					const{opacity}=this.state
					return(
						<div>
						<h1 style={{opacity:opacity}}>{this.props.msg}</h1>
						<button onClick={this.distroyComponent}>继续加油</button>
						</div>
					)
				}
			}
			ReactDOM.render(<Life msg="react学习进行中" />,document.getElementById('test'))
		</script>
	</body>
</html>

用vscode书写：

虚拟DOM与DOM Diff算法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>虚拟DOM,和DOM的diff算法</title>
	</head>
	<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/prop-types.js"></script>
		<script type="text/javascript" src="js/babel.min.js"></script>
		<script type="text/babel">
			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="Your name here"/>!&nbsp;
        It is {this.state.date.toTimeString()}
      </p>
    )
  }
}

ReactDOM.render(
  <HelloWorld/>,
  document.getElementById('example')
)
		</script>
	</body>
</html>

ABU_MOlI_ITUI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react--学习笔记7（受控组件和非受控组件和组件的生命周期----虚拟DOM与DOM Diff算法）

组件的生命周期：eg：<h2 style={{opacity:opacity}}>{this.props.msg}</h2>中，外层{}指的是这里放js代码，内层{}指的是放入js对象1.理解：组件对象从创建到死亡它会经历特定的生命周期阶段 React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作2.生命周期流程图3.生命周期详述组件的三个生命周期状态:..
复制链接

扫一扫

专栏目录