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

内容

了解 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 的特点：

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

1.2 React基本使用

通过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>

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

通过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 体验

普通写法（不提倡）：

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

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

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 中的样式操作

通过 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 的使用 (若多个单词必须用驼峰命名法；若坚持写原单词则必须用引号包裹)

通过 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 函数式组件

function FnComponent(props){
    
    
    console.log(props);
    let name = '函数式组件';
    let jsxObj = <h2>我是JSX对象，可以写在return中</h2>;
    let num =  props.num === '1' ? '1' : '0';
    return (
        <div>
            <h1>我是React{
    
    name}</h1>
            {
    
    jsxObj}
            <h3>{
    
    num}</h3>
        </div>
    )
}

ReactDOM.render(<FnComponent num="1"/>,document.querySelector('#root'))

注意：函数式组件,组件名首字母必须大写(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 复合组件

function FnComponent(props){
    
    
    console.log(props);
    let name = '函数式组件';
    let jsxObj = <h2>我是JSX对象，可以写在return中</h2>;
    let num =  props.num === '1' ? '1' : '0';
    return (
        <div>
            <h1>我是React{
    
    name}</h1>
            {
    
    jsxObj}
            <h3>{
    
    num}</h3>
        </div>
    )
}
class ClassComponent extends React.Component{
    
    
    render(){
    
    
        return(
            <div>
                <h1>我是React{
    
    this.props.name}</h1>
                <FnComponent num={
    
    this.props.num}/>
            </div>
        )
    }
}

ReactDOM.render(<ClassComponent name="复合组件" num="1"/>,document.querySelector('#root'))

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

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栏切换：

效果：
在这里插入图片描述

代码：

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