• React学习笔记1


    React设计出来就是单向数据流(从服务器流向客户端),不存在页面数据和服务端数据进行绑定

    通过组件化(component)去管理不同的数据流,用React开发、创建任何一个应用都是一个组件
    前端组件定义:HTML+CSS+JS+IMG的组合体
    在实际开发中,可以根据页面的布局,对页面进行拆分和组件化

     

    特点和优势:

    1.虚拟DOM(开发时不需要在页面中写任何DOM元素)

    框架底层的一套DOM实现

    2.JSX语法(使用JavaScript XML格式的语法)

    是用于编写HTML内容的一个语法

    3.组件化开发(React最核心的思想,是将页面中任何一个区域或者元素都看成一个组件 component)

    提高复用性

    4.单向数据流(组件和后端之间的数据是单向的,从后端流动到react组件中)

    不会从组件流向后端

    5.组件声明周期(任何一个组件在DOM中都具有一个完整的声明周期,组件初始化的时候开始,组件被移除的时候消失,从而保证性能的优越)

    完善的垃圾回收机制


     

    React使用

     

    1.搭建框架环境

    核心JS,定义虚拟DOM模型,数据更新,支持组件化算法,都在这个JS中

    <script src="../build/react.min.js"></script>

    操作DOM的API

    <script src="../build/react-dom.js"></script>

    JSX的编译器

    <script src="../build/browser.min.js"></script>

     

    2.遵循框架标准和规范

    规范1:在JS文件中写React组件时,需要将这个JS文件的type指定成text/babel

    <script type="text/babel"></script>

    规范2:声明组件时,组件的名称首字母要大写

    规范3:React.createClass({})创建组件,里面放的是一个对象, 实现对象里的render子方法,在render子方法中通过return()返回jsx语法作为页面中要显示的HTML内容

    规范4:JSX(JavaScript XML),XML数据存储格式 JSX语法规范,只有一个开头节点和结束节点

    规范5:声明一个组件后,通过ReactDOM.render()把组件渲染到页面中

    1. ReactDOM.render(param1,param2);
    2. param1 <组件名称/>||<组件名称>< /组件名称>
    3. param2 组件被渲染的位置
     

    Tip:

    1.JSX中的注释:{/** 注释内容 **/} 
    2.React中的HTML元素的class要写成className,for要写成htmlFor

     

    创建样式的两种方式

    方式1:外部CSS控制创建的元素

    方式2:inner css是以object形式存在,并且object css属性要和原生JS属性一致

    将样式挂载到组件的原型链上,在render函数中用this.CSS取出对象//CSS是原型链上的自定义名称

     

    卸载组件

    ReactDOM.unmountComponentAtNode(父元素); 
    要卸载的组件前提是被ReactDOM渲染过,所以要卸载必须先渲染


     

    总结

    1.react特点 虚拟DOM,JSX语法(开始和结束只有一个节点),组件化,组件声明周期,单向的数据流 语法:

    1 React.createClass({
    2 render:function(){
    3 return:(
    4 //返回的HTML内容
    5 )
    6 }
    7 })

     

    2.inner css,inner js

    inner css遵循原生js语法

    3.事件机制

    onClick,onTouchStart... 
    参考官方文档

    4.组件卸载

    ReactDOM.unmountComponentAtNod(父元素);

    组件必须被渲染过才能卸载

  • 相关阅读:
    阻塞队列整理
    List与Map整理
    2、Redis中的链表
    【观点】从曾成杰案看民间金融的高风险与银行缺失的机制创新
    林权抵押贷款政策出台 将实现林业资源变资本
    从《男生传递微笑给女生的故事》想到的流程梳理与优化
    落实制度靠流程<摘自平安50万人的执行力>
    vue踩坑- 报错npm ERR! cb() never called!
    vue踩坑-This dependency was not found
    vue踩坑- 报错npm ERR! cb() never called!
  • 原文地址:https://www.cnblogs.com/chinajins/p/5588646.html
Copyright © 2020-2023  润新知