zoukankan      html  css  js  c++  java
  • react原理

    一.cdn方式,新建测试react项目

    1)npm init -y
    2)npm i react -S (yarn add react)
    直接找node_modules/react/umd目录 react.development.js文件
    3)npm i react-dom -S (yarn add react-dom)
    直接找node_modules/react-dom/umd目录 react-dom.development.js文件
    4)npm i babel-standalone -S (yarn add babel-standalone)
    5)页面当中的引入顺序:
    a)react.development.js
    b)react-dom.development.js
    c)babel.js
    6)script的type属性需要变成 type="text/babel"
    a)es6的语法转换成es5的语法
    b)解析jsx代码
    二.react简易环境的搭建

    三.jsx的原理
    jsx是一种语法糖
    相当于 js+xml
    jsx的使用,可以帮助我们提高开发效率
    jsx的原理就是通过 React.createElement(tag,{attrs},content) > 相当于底层创建了js内存对象(虚拟dom)=> ReactDOM.render()

    四.jsx一些注意事项
    a)jsx ==> javascript + xml
    b)有且只能有一个根元素
    c)因为借鉴了xml的语法规范,标签必须要闭合
    d)class ==> className
    e)jsx里面事件名需要改成驼峰式写法,例如onclick => onClick
    f)jsx里面内联样式 style={{backgroundColor:'yellow'}}

    五.react的插值表达式是一个 { 表达式 }
    {}里面如果放置的是boolean|undefined|null的话,都不会渲染出来
    {}里面如果放置数组的话,会转成字符串的形式出现
    {}里面如果放置对象的话,直接报错了。 ===> 所以对象不能直接被渲染出来

  • 相关阅读:
    vim的额外功能
    vi的使用
    文件与文件系统的压缩
    其他常用的压缩与备份工具
    光盘写入工具
    XFS 文件系统的备份与还原
    打包命令:tar
    Linux 系统常见的压缩命令
    Windows10修改DNS
    Linux 磁盘与文件系统管理
  • 原文地址:https://www.cnblogs.com/cn-oldboy/p/12695447.html
Copyright © 2011-2022 走看看