希腊字母 智慧树 file symfony eloquent shiny smtp vue官方下载 vuejs视频教程 java遍历json数组 mser算法 vim跳到文件末尾 office配置进度 matlab输入参数太多 hadoop环境变量配置 汇编语言clr python输入输出 python中的循环 python创建文件 python打开文件夹 java在线教程 python源码 内存整理工具 梦幻西游手游助手 马赛克软件 c语言表白代码 飞猪ip 神剪辑教程 卡巴斯基离线升级包 assist是什么意思 ansys安装教程 pr动态字幕 万能播放器电脑版 平面设计软件下载 变声器电脑版 截取字符串 jquery手册 pp安卓助手 lol改皮肤软件 易语言数组
当前位置: 首页 > 学习教程  > 编程语言

保安日记:React框架学习第一篇

2020/11/4 14:23:04 文章标签:

初识react React 构建用户界面的JavaScript库,主要用于构建UI界面 特点: 1、声明式的设计 2、高效,采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作。 3、灵活,跟其他库灵活搭配使用。 4、JSX,俗…

初识react

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

特点:

1、声明式的设计

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

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

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

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

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

React Jsx语法

JSX表达式

1、由HTML元素构成

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

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

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

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

优点:

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

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

3、JSX编写模板更加简单快速。(不要跟VUE比)

注意:

1、JSX必须要有根节点。

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

JSX_style 样式

1、Class,style中,不可以存在多个class属性

<div class='abc' class={‘active’}> 错误的表示

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>
)

React 组件

1、函数式组件比较简单,一般用于静态没有交互事件内容的组件页面。

//函数式组件
function Childcom(props){
    console.log(props)

    let title = <h2>我是副标题</h2>
    let weather = props.weather
    //条件判断 
    let isGo = weather=='下雨' ?"不出门":"出门"

    return (
        <div>
            <h1>函数式组件helloworld</h1>
            {title}

            <div>
                是否出门?
                <span>{isGo}</span>
            </div>
        </div>
    )
}

2、类组件,一般又称为动态组件,那么一般会有交互或者数据修改的操作。

//类组件定义
class HelloWorld extends React.Component{
    render(){
        console.log(this)
        return (
            <div>
                <h1>类组件定义HELLOWORLD</h1>
                <h1>hello:{this.props.name}</h1>
                <Childcom weather={this.props.weather} />
            </div>
        )
    }
}

3、复合组件:组件中又有其他的组件,复合组件中既可以有类组件又可以有函数组件。

import React from 'react';
import ReactDOM from 'react-dom';
import './04style.css';
//函数式组件
function Childcom(props){
    console.log(props)

    let title = <h2>我是副标题</h2>
    let weather = props.weather
    //条件判断 
    let isGo = weather=='下雨' ?"不出门":"出门"

    return (
        <div>
            <h1>函数式组件helloworld</h1>
            {title}
            <div>
                是否出门?
                <span>{isGo}</span>
            </div>
        </div>
    )
}
//类组件定义
class HelloWorld extends React.Component{
    render(){
        console.log(this)
//返回的都是JSX对象
        return (
            <div>
                <h1>类组件定义HELLOWORLD</h1>
                <h1>hello:{this.props.name}</h1>
                <Childcom weather={this.props.weather} />
            </div>
        )
    }
}

ReactDOM.render(
    <HelloWorld name="老陈" weather="下雨" />,
    document.querySelector('#root')
)

React State

class Clock extends Component{
    constructor(props){
        super(props)
    //状态 (数据) --view
    //构造函数初始化数据,将需要改变的数据初始化到state中
        this.state = {
            time:new Date().toLocaleTimeString()
        }
    }

    render(){
        return(
            <div>
                <h1>当前时间: {this.state.time}</h1>
            </div>
        )
    }

    //生命周期函数,组件渲染完成时的函数
    componentDidMount(){
        setInterval(()=>{
            console.log(this.state.time)
            //this.state.time = new Date().toLocaleTimeString() 错误的写法
            //切勿直接修改state数据,直接state重新渲染内容,需要使用setState
            //通过this.setState修改完数据后,并不会立即修改DOM里面的的内容,
            //react会在这个函数内容所有设置状态改变后,统一对比虚拟DON,然后再统一修改,提升性能
            this.setState({
                time:new Date().toLocaleTimeString()
            })

        },1000)
    }
}

ReactDOM.render(<Clock />,document.querySelector('#root')
)

本文链接: http://www.dtmao.cc/news_show_350131.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?