• react简易了解

    目录

    第一部分：初识reac

     第二部分：初识组件

     第三部分：受控与非受控组件

    第四部分：高阶函数

     第五部分：常用钩子函数的应用

    第一部分：初识react



        
            
            
        
        

            

            

            
            
            
            
            
            


            

        

    初识react：



        
            
            
            
        
        


            

            


            
            
            
            
            
            

            
        

     第二部分：初识组件



        
            
            
        
        

            


            
            
            
            
            
            

            
        

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			.btn {
    8. 				background-color: #ff557f;
    9. 				color: aliceblue;
    10. 				font-size: 20px;
    11. 			}
    12.  
    13. 			.hove {
    14. 				background-color: chocolate;
    15. 				color: aliceblue;
    16. 				font-size: 20px;
    17. 			}
    18. 		style>
    19. 	head>
    20. 	<body>
    21.  
    22.  
    23. 		<div id="root">
    24.  
    25. 		div>
    26. 		
    27. 		<script src="./js/react.development.js">script>
    28. 		
    29. 		<script src="js/react-dom.development.js">script>
    30. 		
    31. 		<script src="js/babel.min.js">script>
    32.  
    33. 		<script type="text/babel">
    34. 			class IsLike extends React.Component{
    35. 				// state 是一个状态，存储数据
    36. 				state={
    37. 					flag:true,
    38. 					age:20
    39. 				}
    40. 				changeblack=()=>{
    41. 				  // this.state.flag = ! this.state.flag
    42. 				  // 通过setState改变state内部的数据
    43. 				  this.setState({flag:!this.state.flag})
    44. 				}
    45. 				render(){
    46. 					const {flag} = this.state;
    47. 					return(
    48. 						<div>
    49. 						    <button className={flag?"btn":"btn hove"} onClick={this.changeblack}>{flag?"喜欢":"不喜欢"}button>
    50. 						div>
    51. 					)
    52. 				}
    53. 			}
    54. 			
    55.             ReactDOM.render(<IsLike/>,document.getElementById("root"))
    56. 		script>
    57. 	body>
    58. html>

     第三部分：受控与非受控组件



        
            
            
        
        


            

            


            
            
            

            
        



        
            
            
        
        

            

            


            
            
            

            
        

     

    第四部分：高阶函数



        
            
            
        
        

            

            


            
            
            

            
        

     第五部分：常用钩子函数的应用

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			* {
    8. 				padding: 0px;
    9. 				margin: 0px;
    10. 			}
    11.  
    12. 			.btn {
    13. 				width: 100px;
    14. 				height: 50px;
    15. 				background-color: red;
    16. 				border: 1px solid #0f0;
    17. 			}
    18. 		style>
    19. 	head>
    20. 	<body>
    21.  
    22. 		<div id="root">
    23.  
    24. 		div>
    25. 		<script src="js/react.development.js">script>
    26. 		<script src="js/react-dom.development.js">script>
    27. 		<script src="js/babel.min.js">script>
    28.  
    29. 		<script type="text/babel">
    30. 			class Person extends React.Component{
    31. 				state={
    32. 					x:0
    33. 				}
    34. 				//这里采用点击事件 清除组件
    35. 				unmount=()=>{
    36. 					//卸载组件的钩子  unmountComponentAtNode
    37. 					ReactDOM.unmountComponentAtNode(document.getElementById("root"))
    38. 				}
    39. 				//这里是挂载组件
    40. 				 componentDidMount(){
    41. 					 // this.install这里必须要定义 否则无法在清除定时器中找到相关的定时器名称     定时器
    42. 					this.install = setInterval(()=>{
    43. 						  let x = this.state.x
    44. 						if(x>=100){
    45. 							this.setState({x:0})
    46. 						}else{
    47. 							x+=20
    48. 							this.setState({x})
    49. 						}
    50. 						
    51. 					 },1000)
    52. 				 }
    53. 				 //清除组件  清除定时器
    54. 				 componentWillUnmount(){
    55. 					 clearInterval(this.install)
    56. 				 }
    57. 				 // 挂在组件
    58. 				render(){
    59. 					let x= this.state.x
    60. 					return(
    61. 					<div>
    62. 					     <div className="btn" style={{"transform":`translateX(${x}px)`}}>div>
    63. 						 <button type="submit" onClick={this.unmount}>卸载组件button>
    64. 					div>
    65. 					)
    66. 				}
    67. 			}
    68. 		   ReactDOM.render(<Person/>,document.getElementById("root"))
    69. 		script>
    70. 	body>
    71. html>

     

  • 相关阅读:
    新兴的跨平台BianLian勒索软件攻击正在提速
    h5页面使用html2canvas实现分享海报
    【Vue3.0移动端项目--旅游网】--项目初始化搭建
    2:set和map解决力扣题
    spring注解式缓存+Redis
    想做个百度百科怎么做，怎么弄百度百科
    混币器困境：保护了隐私也掩护了黑产
    技术干货 | 提速40%，MindSpore 二阶优化器技术解密！
    计算机毕业设计ssm+vue基本微信小程序的校园生活助手系统
    人工智能如何改变联络中心座席
  • 原文地址：https://blog.csdn.net/m0_59505309/article/details/126643376