当前位置：网站首页 > React.js开发 > 正文

reactjs教程视频（react教程推荐）

React.js开发 来源： 网络 编辑：小编 更新时间：2025-09-06 08:36:04 浏览量：9



文章定位：了解原生组件写法，State数据驱动，JSX语法，调试工具，axios，父子组件传值，生命周期；

  • 前置文章及环境搭建：React Native & React & Ant D & Redux
  • 代码仓库：kirikaTowa/ReactDemo (github.com)
  • 突然发现技术胖在掘金上有发文，推荐阅读：掘金最污的 React16.x 图文视频教程

image.png

 
  
 
  
image.png
 
  
1、 简化js代码
 
  
2、 三元运算符 
 
  
  • {false?'JSPang.com':'技术胖'}
    •  
  
     
  
    1、  输入框表单标签
     
  
    2、 React要求必须在一个组件的最外层进行包裹
     
  
    3、 引入并使用react的 < Fragment>标签可取代外层div，网站中检查元素即可发现最外层的一套没了。
     
  
    image.png
     
  
    1、响应式设计-数据驱动【React核心，需要动态比先考虑数据】
     
  
       
   
    • 官方不用直接操作，不用关注dom的create，by id等；
      •  
   
    • target:触发事件的元素。有可能是冒泡的元素
      •  
   
    • currentTarget : 事件绑定的元素。 2、JSX格式
      •  
   
    • JSX中没有括号 UI语法是不允许换行的，有()就可以换行
      •  
  
     
  
     
  
    1、es6(js标准语法)拓展运算符
     
  
    2、onChange和onClick是官方提供的不同方法体
     
  
    3、有个报错
     
  
       
   
    1. <li>循环时没有唯一key值,
      2.  
  
     
  
    image.png
     
  
     
  
    1、 let声明变量
     
  
    2、局部变量删除规范
     
  
     
  
    1、 JSX注释得注意，用软件快捷键
     
  
    2、 新建style.css
     
  
       
   
    1. 非正式写法：.input{ border:3px solid #ae7000} 
      2.  
   
    2. 导包：import 'https://article.juejin.cn/post/style.css' 
      3.  
   
    3. 添加元素： 
      4.  
   
    4. 控制台出现异常-类名冲突，引用css中参数名用className 
      5.  
  
     
  
    image.png
     
  
    3、解析输入的html标签
     
  
       
   
    1. 直接在input框中输入<h2>Test<h2解析/> 不会对应解析出来
      2.  
   
    2. 使用dangerouslySetInnerHTML
      3.  
  
     
  
     
  
    1、 快速代码插件：Simple React Snippets
     
  
    2、 官网：Simple React Snippets - Visual Studio Marketpla ce
     
  
    image.png
     
  
    image.png
     
  
       
   
    1. 快捷键 imrc，cc的运用
      2.  
  
     
  
    1、父给子传值
     
  
       
   
    1. 定义一个传给子组件的属性content，将map中的item值传递给子组件 
      2.  
   
    2. 子组件中，通过content给props赋值即可 
      3.  
  
     
  
    2、子组件向父组件传值
     
  
       
   
    • react不允许子组件直接干预父组件
      •  
   
    • 而且之前的delete事件被注释掉了，子组件里写个新的吧
      •  
  
     
  
       
   
    1. 和之前类似，写事件，在标签中调用
      2.  
   
    2. 父组件操作
      3.  
  
     
  
       
   
    • 类似定义context的写法再定义一个contextIndex传给子，子同样取法，要传给子方法，注意bind(this)其实是有性能问题的，使用构造方法取代
      •  
   
    • 原代码
      •  
  
     
  
     
  
       
   
    • 更新
       //这个其实快速生成的时候会有的 constructor(props){ super(props) this.handleClick=this.handleClick.bind(this)//在构造方法中就绑定 省的循环里蛋疼 }

      •  
  
     
  
     
  
       
   
    1. 父组件通过属性传递方法
      2.  
  
     
  
     
  
       
   
    1. 子组件通过传递的属性名调用对应方法，参数相同
      2.  
  
     
  
     
  
       
   
    • 之前的方法可以传递参数，方法，当然也可以传递列表；
      •  
   
    • 之所以叫单向是因为只能传递不能修改，13节没有修改，删除方法对应调用了父类方法也是由于这个原因；
      •  
   
    • 子组件将行改值会报错； 
      •  
  
     
  
    1、和其他前端框架配合使用-例如Jquery
     
  
       
   
    1. 这种写法当前只对root进行了渲染，其实public里还有其他控件，比如title等，root中可以写
      2.  
  
     
  
    image.png
     
  
     
  
       
   
    • 之前都是使用console.log 调试太蛋疼了
      •  
   
    • Chrome插件：React developer tools
      •  
  
     
  
    1、 图标状态
     
  
       
   
    • 灰色：页面不是又React编写的。
      •  
   
    • 蓝色: 页面是用React编写的，且在生产/Releas环境。
      •  
   
    • 红色：页面是用React编写的，且在UAT/debug当中。
      •  
  
     
  
    image.png
     
  
       
   
    • 虽然组件间传值了，但是没加类型校验，谁知道你传的是啥-PropTypes应运而生
      •  
   
    • sample：父组件向子传值，子组件需校验-引入依赖impt；使用defaultProps，父组件不传递属性也不会崩
      •  
   
    • 在class外 export之上
      •  
  
     
  
     
  
       
   
    • 测试连接写法
      •  
  
     
  
     
  
       
   
    1. 在父组件的input中类似写属性的方式，使用ref穿的value 
      2.  
   
    2. 方法里就可以直接取了
      3.  
  
     
  
     
  
       
   
    1. 测试在ul里定义将ul传过去，我超 控件本身传。。然后打length，发现对不上，少一个；因为setState是异步的->虚拟dom渲染；先打出来后，state才改变 
      2.  
  
     
  
     
  
    image.png
     
  
       
   
    1. 解决异步问题，setState自带类似lambda的回调
      2.  
  
     
  
     
  
       
   
    • 生命周期定义：到一定程度会自己执行；
      •  
  
     
  
    image.png
     
  
    1、Initialization 初始化阶段
     
  
       
   
    1. constructor其实是es6的语法，其实不属于生命周期；心里可看做阶段，定义属性（props）和状态(state)。
      2.  
  
     
  
    2、Mounting 挂载阶段
     
  
       
   
    1. componentWillMount：组件即将被挂载到页面的时刻执行；
      2.  
   
    2. render：页面state或props发生变化时执行；
      3.  
  
     
  
       
   
    • Your render method should have a return statement react/require-render-return
      •  
  
     
  
       
   
    1. componentDidMount：组件挂载完成时被执行。
      2.  
  
     
  
    3、update 更新阶段
     
  
    1、 常规阶段
     
  
       
   
    1. shouldComponentUpdate：组件更新之前执行，需返回boolea值，若返回false就不往下执行了（render不会执行，页面也不会进行渲染）；
      2.  
   
    2. componentWillUpdate：更新前，shouldComponentUpdate函数之后执行，所以shouldComponentUpdate返回false时这个同样不会执行；
      3.  
   
    3. render()进行渲染，类似安卓里的onCreate方法；
      4.  
   
    4. componentDidUpdate：组件更新之后执行，它是组件更新的最后一个环节；
      5.  
  
     
  
    2、 非常规阶段 1.componentWillReceiveProps：子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。
     
  
       
   
    • 顶层组件不会执行，因为他未接受任何属性；
      •  
   
    • 这个组件第一次存在于Dom中，函数是不会被执行的;（第一次渲染子组件不会执行，第二次会触发render）
      •  
   
    • 如果已经存在于Dom中，函数才会被执行；
      •  
  
     
  
    4、unMounting阶段 解除挂载阶段
     
  
       
   
    1. componentWillUnmount 例如sample子组件删除一条列表就会执行
      2.  
  
     
  
    1、目前问题
     
  
       
   
    1. 全组件在执行render，父组件输入框变化时，子组件的render也在执行，且子item有几条每次都会刷一次，几百条那不是会爆炸； 2、解决方法：通过shouldComponentUpdate 上面说的Boolean拦截掉
      2.  
   
    2.  
  
     
  
       
   
    • nextProps:变化后的属性;
      •  
   
    • nextState:变化后的状态;
      •  
  
     
  
       
   
    1. 完成测试搞定，常见的todolist就是要这种性能优化；
      2.  
  
     
  
    1、 终端命令：npm install -save axios
     
  
       
   
    • : 安装项目到项目目录下，不会将模块依赖写入或。
      •  
   
    • :  将模块安装到全局，具体安装到磁盘哪个位置，要看 的位置
      •  
   
    • ： 将模块安装到项目目录下，并在文件的节点写入依赖（添加依赖后 其他人安装后npm i就可以下载依赖）。（生产环境）
      •  
   
    • ：模块安装到项目目录下，并在文件的节点写入依赖。（devDependencies uat开发模式环境）
      •  
  
     
  
    2、 post发起请求，链式.then处理回调成功，.catch处理回调失败；这边模拟失败了是因为没有设置请求头等东西； image.png
     
  
    1、临时写的接口数据叫 mock
     
  
    2、登录Easy Mock (mengxuegu.com),并注册相应信息
     
  
    image.png
     
  
       
   
    1. CSS通过类名指定样式
      2.  
   
    2. 动画及参数初见
      3.  
  
     
  
     
  
       
   
    1. @keyframes /* 定义帧动画及帧节点 */
      2.  
   
    2. :后要紧跟 不能加空格
      3.  
   
    3. 动画结束后会停在第一帧，forwards可以解决
      4.  
   
    4. 做不到消除dom，因为是纯前端，不含逻辑，做不动安卓属性动画那样的阶段性执行xxx方法
      5.  
  
     
  
     
  
    官方维护的动画库，感谢React极好的生态 1、 官方指令：
     
  
       
   
    • -save会进生产环境
      •  
  
     
  
    2、 对应Animate.js可引入三种常见库
     
  
     
  
    3、 Animate.js中使用CSSTransition对Animate单个组件进行动画控制
     
  
     
  
    4、 使用对应组件并基本声明，css可以写对应状态 image.png
     
  
    5、unmountOnExit 可以控制dom 控件不可见时 dom去除/添加 占位，像Gone；
     
  
    1、TransitionGroup就是为了多动画而生的，结合CSSTransition
     
  
    2、既然是针对Group的，那这次我们改动的目标是Xiaojiejie.js
     
  
       
   
    1. ul下的key要写在直属第一层包裹，有CSSTransition时写在CSSTransition里
      2.  
   
    2. timeout时间是react-transition-group定义属性
      3.  
   
    3. key如果写key={index + Item} 点击第一条动画会有异常
      4.  
  
     
  
    到此这篇reactjs教程视频（react教程推荐）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！ 
  

                            
    

                            
    
                                
  • 
                                    
                                    上一篇：
                                    
                                    react基础入门（react新手教程）
                                    
                                    
                                
    • 
                                
  • 
                                    
                                    下一篇：
                                    
                                    reactjs（reactJS精通）
                                    
                                    
                                
    • 
                            
    

                            
                            
    
                                
    
                                    版权声明：
                                    
    
                                        
                                        本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
                                        
                                        
    
                                         
                                        如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
                                        
                                    

    
                                    
    转载请注明出处，原文链接：https://www.xkablog.com/qdreactjs/59065.html
    
                                
    
                            
    
                            
                        
    
                        
    
                            
    
                                
                                
                                
                                    # React
                                
                                
                                    # 推荐
                                
                                
                                    # 视频
                                
                                
                                    # 教程
                                
                                
                            
    
                        
    

                        
                        
                        
    
                            
    相关文章：
    
                        
                        
  • 
                                react基础入门（react新手教程）2025-09-06 08:36:04
                        
    • 
                        
                        
  • 
                                reactJS精通（react入门到精通）2025-09-06 08:36:04
                        
    • 
                        
                        
  • 
                                reactJS入门（react从入门到精通）2025-09-06 08:36:04
                        
    • 
                        
                        
  • 
                                react基础入门（react教程,看这篇就够了）2025-09-06 08:36:04
                        
    • 
                        
                        
  • 
                                react 入门教程（react基础教程）2025-09-06 08:36:04
                        
    • 
                        
                        
  • 
                                reactjs（reactJS精通）2025-09-06 08:36:04
                        
    • 
                        
                        
  • 
                                reactjs教程视频（react教程,看这篇就够了）2025-09-06 08:36:04
                        
    • 
                        
                        
  • 
                                react js 教程（reactjs官方文档）2025-09-06 08:36:04
                        
    • 
                        
                        
  • 
                                react js 教程（reactjs.org）2025-09-06 08:36:04
                        
    • 
                        
                        
  • 
                                reactJS组件（react组件框架）2025-09-06 08:36:04
                        
    • 
                        
                        
    
                        
                    
    
                
    
            
    
        
    
        
    
    

    


    
    ❮
    全屏图片
    ❯