保安日记：React框架学习第一篇-CSDN博客

本文链接：https://blog.csdn.net/Zhuo_De/article/details/109489455

初识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')
)


class Tab extends React.Component{
    constructor(props){
        super(props)
    
    //设置状态
        this.state = {
            c1:'active',
            c2:'content'
        }
        this.clickEvent = this.clickEvent.bind(this)
    }
    clickEvent(e){
        let index = e.target.dataset.index;
        if(index == '1' ){
            this.setState({
                c1:'active',
                c2:'content'
            })
        }else {
            this.setState({
                c2:'active',
                c1:'content'
            })
            console.log('-----');
            console.log(this);
        }

    }

    render(){
        return(
            <div>
                <button data-index='1' onClick={this.clickEvent}>内容一</button>
                <button data-index='2' onClick={this.clickEvent} >内容二</button>
                <div className={this.state.c1}>
                    <h1>2222222</h1>
                </div>
                <div className={this.state.c2}>
                    <h1>111111</h1>
                </div>
            </div>
        )
    }
}

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