• 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的话,都不会渲染出来
    {}里面如果放置数组的话,会转成字符串的形式出现
    {}里面如果放置对象的话,直接报错了。 ===> 所以对象不能直接被渲染出来

  • 相关阅读:
    初涉SQL Server性能问题(2/4):列出等待资源的会话
    初涉SQL Server性能问题(1/4):服务器概况
    分享
    React Native 自定义radio 单选or多选
    css之定位
    小小小小小小之新闻案例
    paddingmargin的属性与连写
    css标准流和浮动
    css 伪类
    css元素的显示方式
  • 原文地址:https://www.cnblogs.com/cn-oldboy/p/12695447.html
Copyright © 2020-2023  润新知