zoukankan      html  css  js  c++  java
  • react学习笔记——(一)

    React 构建用户界面的JavaScript库,主要用于构建UI界面。

    特点:

    1、声明式的设计

    2、高效,采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作。

    3、灵活,跟其他库灵活搭配使用。

    4、JSX,俗称JS里面写HTML,JavaScript语法的扩展。

    5、组件化,模块化。代码容易复用,2016年之前大型项目非常喜欢react。

    6、单向数据流。没有实现数据的双向绑定。数据-----视图------事件-----数据

    react官网

    https://react.docschina.org/

    创建项目


    1、通过script引入使用,仅用于学习调试使用

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    2、通过react的脚手架,创建项目进行开发,部署。

    (1)安装脚手架Creact React App.

             cnpm install -g create-react -app

      (2)  创建项目

        create-react-app 01reactapp(项目名称可以自定义)

             创建项目是需要一些时间的,请耐心等待

             

    React元素的渲染

    let h2 = <h2>helloworld</h2>;

    使用JSX的写法,可以创建JS元素对象

    注意:JSX元素对象,或者组件对象,必须只有一个根元素(根节点)

    例:

    //实现页面时刻的显示
    
    function clock(){
       // toLocaleTimeString()转换时间       let time = new Date().toLocaleTimeString()     let element = (         <div>             <h1>现在的时间是{time} </h1>             <h2>这是副标题</h2>         </div>     )
       // querySelector找到根节点     let root = document.querySelector('#root');     ReactDOM.render(element,root) } clock()
    //间隔函数 每隔一秒一变 setInterval(clock,1000)

    函数式组件渲染

    //父子组件通过props传值
    function Clock(props){     return (                 <div>                     <h1>现在的时间是{props.date.toLocaleTimeString()} </h1>                     <h2>这是函数式组件开发</h2>                 </div>     ) } function run(){     ReactDOM.render(         <Clock date={new Date()} />,         document.querySelector('#root')     ) } setInterval(run,1000)

     React JSX

     优点:

     1、JSX执行更快,编译为JavaScript代码时进行优化

     2、类型更安全,编译过程如果出错就不能编译,及时发现错误

     3、JSX编写模板更加简单快速

     注意:

     1、JSX必须要有根节点。

     2、正常的普通HTML元素要小写。如果大写默认是组件。

     JSX表达式:

     1、由HTML元素构成

     2、中间如何需要插入变量用{}

     3、{}中间可以使用表达式

     4、{}中间表达式中可以使用JSX对象

     5、属性和html内容一样都是用{}来插入内容

    例子:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './App.css'
    
    let time = new Date().toLocaleTimeString()
    let str = '当前时间是:'
    let element = (
        <div>
            <h1>helloworld</h1>
            <h2>{str+time}</h2>
        </div>
    )
    
    console.log(element)
    
    let man = '发热';
    let element2 = (
        <div>
            <h1>今天是否隔离</h1>
            <h2>{man=="发热"?<button>隔离</button>:"躺床上"}</h2>
        </div>
    )
    
    //let man = '发热';
    let element4 = (
        <div>
            <span>横着躺</span>
            <span>竖着躺</span>
        </div>
    )
    man = '正常'
    let element3 = (
        <div>
            <h1>今天是否隔离</h1>
            <h2>{man=="发热"?<button>隔离</button>:element4}</h2>
        </div>
    )
    
    let color = 'bgRed'
    let logo = 'https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png'
    //HTML的样式类名要写className,因为class在js当中是关键词
    let element5 = (
        <div className={color}>
            <img src={logo} />
            红色的背景颜色
        </div>
    
    )
    
    ReactDOM.render(
        element5,
        document.getElementById('root')
    
    )
    

     

    JSX_style 样式

    1、Classstyle中,不可以存在多个class属性(就是字面意思)

    2、style样式中,如果存在多个单词的属性组合,第二个单词开始,首字母大写。或者用引号引起来,否则会报错。

    let exampleStyle = {
        background:"skyblue",
        borderBottom:"4px solid red",
        'background-image':"url(https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png)"
    }

    3、多个类共存的操作

    let element2 = (
        <div>
            <h1 className={"abc "+classStr}>helloworld</h1>
        </div>
    )
    
    
    let classStr2 = ['abc2','redBg2'].join(" ")
    let element3 = (
        <div>
            {/* 这里写注释 */}
            <h1 className={classStr2} style={exampleStyle}>helloworld</h1>
        </div>
    )
    

      

    4、注释

    必须在括号的表达式内书写,否则报错:{/* 这里写注释 */}

    let classStr2 = ['abc2','redBg2'].join(" ")
    let element3 = (
        <div>
            {/* 这里写注释 */}
            <h1 className={classStr2} style={exampleStyle}>helloworld</h1>
        </div>
    )

     

      

  • 相关阅读:
    1208C Magic Grid
    jsc2019_qualE Card Collector
    jsc2019_qualD Classified
    jsc2019_qualC Cell Inversion
    牛客提高D6t3 分班问题
    牛客提高D6t2 破碎的序列
    牛客提高D6t1 积木大赛
    loj6259「CodePlus 2017 12 月赛」白金元首与独舞
    p4208 [JSOI2008]最小生成树计数
    p4111 [HEOI2015]小Z的房间[简述矩阵树定理]
  • 原文地址:https://www.cnblogs.com/changyuyao/p/13863289.html
Copyright © 2011-2022 走看看