• 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. .hove {
    13. background-color: chocolate;
    14. color: aliceblue;
    15. font-size: 20px;
    16. }
    17. style>
    18. head>
    19. <body>
    20. <div id="root">
    21. div>
    22. <script src="./js/react.development.js">script>
    23. <script src="js/react-dom.development.js">script>
    24. <script src="js/babel.min.js">script>
    25. <script type="text/babel">
    26. class IsLike extends React.Component{
    27. // state 是一个状态,存储数据
    28. state={
    29. flag:true,
    30. age:20
    31. }
    32. changeblack=()=>{
    33. // this.state.flag = ! this.state.flag
    34. // 通过setState改变state内部的数据
    35. this.setState({flag:!this.state.flag})
    36. }
    37. render(){
    38. const {flag} = this.state;
    39. return(
    40. <div>
    41. <button className={flag?"btn":"btn hove"} onClick={this.changeblack}>{flag?"喜欢":"不喜欢"}button>
    42. div>
    43. )
    44. }
    45. }
    46. ReactDOM.render(<IsLike/>,document.getElementById("root"))
    47. script>
    48. body>
    49. 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. .btn {
    12. width: 100px;
    13. height: 50px;
    14. background-color: red;
    15. border: 1px solid #0f0;
    16. }
    17. style>
    18. head>
    19. <body>
    20. <div id="root">
    21. div>
    22. <script src="js/react.development.js">script>
    23. <script src="js/react-dom.development.js">script>
    24. <script src="js/babel.min.js">script>
    25. <script type="text/babel">
    26. class Person extends React.Component{
    27. state={
    28. x:0
    29. }
    30. //这里采用点击事件 清除组件
    31. unmount=()=>{
    32. //卸载组件的钩子 unmountComponentAtNode
    33. ReactDOM.unmountComponentAtNode(document.getElementById("root"))
    34. }
    35. //这里是挂载组件
    36. componentDidMount(){
    37. // this.install这里必须要定义 否则无法在清除定时器中找到相关的定时器名称 定时器
    38. this.install = setInterval(()=>{
    39. let x = this.state.x
    40. if(x>=100){
    41. this.setState({x:0})
    42. }else{
    43. x+=20
    44. this.setState({x})
    45. }
    46. },1000)
    47. }
    48. //清除组件 清除定时器
    49. componentWillUnmount(){
    50. clearInterval(this.install)
    51. }
    52. // 挂在组件
    53. render(){
    54. let x= this.state.x
    55. return(
    56. <div>
    57. <div className="btn" style={{"transform":`translateX(${x}px)`}}>div>
    58. <button type="submit" onClick={this.unmount}>卸载组件button>
    59. div>
    60. )
    61. }
    62. }
    63. ReactDOM.render(<Person/>,document.getElementById("root"))
    64. script>
    65. body>
    66. html>

     

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