【React】从入坑到跑路：基本语法

落日映苍穹つ 2022-11-29 05:40 141阅读 0赞

## 内容 ##

> 了解 React  
> React 元素 渲染  
> React 中的JSX  
> React样式和注释  
> React 组件  
> React 状态

## 写在前面 ##

我也在反复问自己 **Vue** 它不香么，可久而久之就觉得：也许是 Vue 太香了，让自己有点处于舒适圈的紧迫感。于是热爱学习的我准备开启React 的征程。谈谈自己对于学习 React 的看法：1：React 相较于 Vue 学习门槛更高，但同时又能让自己对于原生的东西更有体会；2：即使 Vue 目前大火，但对于一些一直使用 React 的公司，还是在沿用React。3：技多不压身么，学完 Vue 再接触 React 指定能让你的技术更上一层楼。

## 1. 了解React ##

##### 1.1 关于React #####

**React** 用于构建用户界面的`JavaScript`库，主要用于构建UI界面 ，传送：[React中文网][React]、[React官网][React 1]

**React** 的特点：

1、`声明式`的设计  
2、高效，采用`虚拟DOM`来实现DOM的渲染，最大限度的`减少DOM的操作`。  
3、灵活，跟其他库`灵活`搭配使用。  
4、`JSX`，俗称JS里面写HTML，JavaScript语法的扩展。  
5、`组件化，模块化`。代码容易复用，16年之前大型项目非常喜欢使用react。  
6、`单向数据流`。没有实现数据的双向绑定。数据->视图->事件->数据。  
7、不同于 Vue 的 `MVC 框架`。  
8、写 React 更像是`自己在定义规则`，别有一番作为。

##### 1.2 React基本使用 #####

1.  通过script引入使用，仅用于学习调试使用

注意：其不同于 Vue ，\`除了引入react、还要引入 react-dom

1.  通过`react的脚手架`，创建项目进行开发，部署（本文多用此方式）

1.安装react脚手架create-react-app。
    npm install -g create-react-app
    2.创建项目
    create-react-app first-react(项目名称可以自定义)
    3.项目文件夹结构与 Vue 基本一致，且安装时不会提示自主安装的包，只安装基础包（用到自主安装）

## 2. React 元素渲染 ##

ReactDOM.render(<App/>,document.getElementById('root'));
    // 等价于
    let App = <App/>;
    let root = document.getElementById('root');
    ReactDOM.render(App,root);

**注意**：其中的 `<APP/>`为js的普通对象；此处 `ReactDOM 封装了 render()`函数为我们完成渲染

## 3. React 中的 JSX ##

`优点`：  
1、JSX执行更快，编译为JavaScript代码时进行优化  
2、类型更安全，编译过程如果出错就不能编译，及时发现错误  
3、JSX编写模板更加简单快速。（不要跟VUE比）

注意：  
1、JSX必须要有根节点。  
2、正常的普通HTML元素要小写。如果是大写，默认认为是组件。

##### 3.1 使用 JSX 语法创建 JS 对象 #####

基本语法：

let h1 = <h1>hello world</h1>;

**注意**：JSX 语法不同于 JS 语法，`无需添加 引号`

##### 3.2 JSX 体验 #####

1.  普通写法（不提倡）：

function timer(){ 
        let element = (
        <div>
            <h1>当前时间为：{ new Date().toLocaleTimeString()}</h1>
        </div>);
        ReactDOM.render(element,document.querySelector('#root'))
    }
    timer();
    setInterval(timer,1000);

1.  函数式组件（静态组件，一般不写事件）

function Timer(props){ 	//实现时间实时显示
        return (
            <div>
                <h1>当前时间：{ props.date.toLocaleTimeString()}</h1>
            </div>
        )
    }
    
    function run(){ 
        ReactDOM.render(
            <Timer date = { new Date()}/>,
            document.querySelector('#root')
        )
    }
    run();
    setInterval(run,1000);

**注意**：1：JSX元素对象，或者组件对象，必须只有1个根元素（根节点）；2：所有的变量都必须用 "\{\}"包裹

##### 3.3 JSX 表达式 #####

`JSX表达式`：  
1、由HTML元素构成  
2、中间如果需要插入变量用\{\}  
3、\{\}中间可以使用表达式  
4、\{\}中间表达式中可以使用JSX对象  
5、属性和html内容一样都是用\{\}来插入内容

// 1. JSX对象可看成普通的对象，方便react使用，有HTML元素构成
    let demo1 = (
        <div>
            <h1>hello React</h1>
        </div>
    )
    // 2. JSX 中间若要插入变量用 {}
    let name = 'cwen';
    let demo2 = (
        <div>
            <h1>{ name}</h1>
        </div>
    )
    // 3. JSX 中间可以使用表达式且要用{}
    let demo3 = (
        <div>
            <h1>{ 1+1}</h1>
        </div>
    )
    // 4. {}中间的表达式可以使用 jsx对象
    let demo4 = (
        <div>
            <h1>我要使用其他的jsx对象</h1>
            <div>{ demo3}</div>
        </div>
    )
    // 5. 属性和HTML内容一致，可以用{}来插入内容（添加类尽量用className，因为class为js中的关键字）
    let color = 'textColor';
    let bgi = 'https://bgi.img';
    let demo5 = (
        <div className={ color}>
            <p>我是有样式的</p>
            <img src={ bgi} alt=""/>
        </div>
    )
    ReactDOM.render(demo5,document.querySelector('#root'));

## 4. React样式和注释 ##

##### 4.1 JSX 中的样式操作 #####

1.  通过 `style` 修改样式

// 1. style 的使用 (若多个单词必须用驼峰命名法；若坚持写原单词则必须用引号包裹)
    let mystyle = { 
        width:'100px',
        color:'red',
        fontSize:'12px',
        "text-align":"center"
    }
    
    let demoStyle = (
        <div>
            <h1 style={ mystyle}>hello mystyle</h1>
        </div>
    )
    
    ReactDOM.render(demoStyle,document.querySelector('#root'))

**注意**：style 的使用 (若多个单词必须用驼峰命名法；若坚持写原单词则必须用引号包裹)

1.  通过 `class` 修改样式

// 2. React 中class不会合并，而会被覆盖，若含多个类，需要进行字符串拼接(且注意中间吗留个空格，方便渲染引擎识别)
    let myclass = 'class1';
    let arrclass = ['class1','class2'].join(' ');
    let demoClass = (
        <div>
            <h1 className={ myclass + ' class2'}>hello myclass</h1>
            <h2 className={ arrclass}>hello arrclass</h2>
        </div>
    )
    ReactDOM.render(demoClass,document.querySelector('#root'))

**注意**：React 中class不会合并，而会被覆盖，若含多个类，需要进行字符串拼接(且注意中间要留个空格，方便渲染引擎识别)；一定要用 className 来定义类（避免关键字冲突）

##### 4.2 JSX 中的注释 #####

{/*  <h1>我上边是注释</h1> */}

## 5. React 组件 ##

函数式组件与类组件的区别和使用，函数式比较简单，一般用于静态没有交互事件内容的组件页面。类组件，一般又称为动态组件，那么一般会有交互或者数据修改的操作。

##### 5.1 函数式组件 #####

**注意**：函数式组件,组件名首字母必须大写(return 的是 JSX对象)，其可以进行原生js函数的一些操作;参数用props进行接收

##### 5.2 类组件 #####

class ClassComponent extends React.Component{ 
        render(){ 
            return(
                <div>
                    <h1>我是React{ this.props.name}</h1>
                </div>
            )
        }
    }
    
    ReactDOM.render(<ClassComponent name="类组件"/>,document.querySelector('#root'))

**注意**：类组件（注意使用参数前要 + this），其可以进行 JS 中类的操作

##### 5.3 复合组件 #####

**注意**：复合组件（组件中定义其他组件，也可类组件含函数组件、函数组件含类组件）

## 6. React 状态 ##

React 状态 State ，相当于 Vue 中的 data ；对数据进行管理

示例（一般应用于类组件，方便）：

class Clock extends React.Component{ 
        constructor(props){   //构造函数传递参数
            super(props); // super 调用父类的属性和方法
            this.state = {   // 相当于 vue的 data
                time:new Date().toLocaleTimeString()
            }
        }
        render(){ 
            return(
                <div>
                    <h1>当前时间为：{ this.state.time}</h1>
                </div>
            )
        }
        componentDidMount(){  //钩子函数（页面渲染完成调用）
            setInterval(()=>{ 
                this.setState({   //修改state中的数据，且通知虚拟DOM，对比后更新视图
                    time:new Date().toLocaleTimeString()
                })
            },1000)
        }
    }
    
    ReactDOM.render(<Clock/>,document.querySelector('#root'))

## 7. Last （综合） ##

Tab栏切换：

效果：  
![在这里插入图片描述][20200821173614210.gif_pic_center]

代码：

class Tab extends React.Component { 
        constructor(props) { 
            super(props);
            this.state = { 
                s1: 'current active',
                s2: 'current'
            }
            this.clickEvent = this.clickEvent.bind(this) //改变点击事件this指向
        }
        clickEvent(e) { 
            if (e.target.dataset.index === "1") {  //必须用dateset拿到index的值
                this.setState({ 
                    s1: 'current active',
                    s2: 'current'
                })
            } else { 
                this.setState({ 
                    s1: 'current',
                    s2: 'current active'
                })
            }
        }
        render() { 
            return ( 
                <div >
                <button data-index = "1" onClick = {  this.clickEvent }> Tab1 </button>
                 <button data-index = "2" onClick = {  this.clickEvent }> Tab2 </button> 
                 <div className = {  this.state.s1 } > Tab111111 </div> 
                 <div className = {  this.state.s2 } > Tab222222 </div> 
                 </div>
            )
        }
    }
    
    ReactDOM.render( < Tab / > , document.getElementById('root'))

#### \----------------淦-------------- ####

[React]: https://react.docschina.org/
[React 1]: https://reactjs.org/
[20200821173614210.gif_pic_center]: /images/20221124/b969031979844f97aeb0790a461278ff.png