React 语法基本使用介绍

Posted wangze0608

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 语法基本使用介绍相关的知识,希望对你有一定的参考价值。

一、认识入口文件

React 中,app/main.js 叫做入口文件,这个文件是 webpack.congifg.js 的 entry 标识的文件。任何项目入口文件只能有 1 个。

入口文件写法:

import React from "react";
import ReactDom from "react-dom";
import App from "./App";

ReactDom.render(
    <App />,
    document.querySelector("#app")
);

React 库就是 React 核心库,ReactDOM 库专门用于入口文件,调用ReactDOM.render() 方法 ,负责将根组件上树。

引入React 的作用,是因为 React 使用了 jsx 语法,jsx 语法简单理解就是不加引号的 html 语法裸写在 JS 文件里面,jsx 是英语 javascript Extension(JavaScript增强版)的意思,自称是世界上将 HTML 和 JS 融合的最好的语言。jsx 语法会被 babel 翻译为字符串拼接。但是,React 规定,一个有 jsx 语法的 js 文件,必须引入 React 包,否则babel 不予翻译。

根组件上树的语法:
ReactDOM.render(JSX , 挂载点);

二、初识组件

组件(component):将页面中的一部分区域的 HTML 结构、CSS 样式、交互效果、数据等进行封装,封装到独立的一个文件中开发,叫做组件。

React 中组件是类,定义一个继承 React.Component 类的类,就是一个组件。
React 规定,所有的组件都是一个类,首字母必须严格大写。

在 app 文件夹中创建 App.js,然后书写标准的类的“壳子”:

import React,{Component} from "react";
export default class App extends Component {
    // 构造函数
    constructor(){
        //必须调用超类(父类)
        super();
    }
    render(){
        return (
            <div>
                <h1>我是 App.js 根组件,早上好!</h1>
            </div>
        );
    }
}

类的名字尽可能和文件的名字一样。

官方手册上对 render 函数的描述:The render method returns a description of what you want to see on the screen. In particular, render returns a React element, which is a lightweight description of what to render. Most React developers use a special syntax called “JSX” which makes these structures easier to write.
翻译:render函数返回了你想要在屏幕上呈现的东西。一般来说,render 函数要 return一个 React 元素,这个元素描述了组件长什么样子。绝大部分 React 的开发者,使用了一个叫做 JSX 的语法让结构更易于书写。

return 后面直接跟的是 jsx 语法,没有任何的引号的 HTML。注意不能在 return 后面换行的,因为换行就默认 return undefined 了。如果你非要换行必须像我一样在上面加个圆括号在圆括号里面换行。

定义完一个类之后,其他的 js 文件就能够引入它,然后使用它的名字当做标签名,从而使用实例化这个类:
import App from "./App";

所以使用组件非常简单:① 引包 ② 变成标签对 或 单标签
每当我们写了一个组件的标签对之后,就相当于实例化了一次。

三、JSX 语法

JSX 是 facebook 公司为了 React 专门打造的语言,并且已经申请了专利,JSX 确实好用。JSX = JavaScript Extension,也有说法叫做 JavaScript + XML。

专门解决 JavaScript 和 HTML 结合的问题。因为我们原来经常写:

"<div>我爱你" + year + "年</div>"

JSX 彻底解决了这个问题。

<div>我爱你{year}年</div>

  • JSX 要求标签严格封闭,尤其是单标签,单标签必须写末尾反斜杠,比如:
//img 的路径以 index.html 文件为准
<img />
<br />

必须这么写,要不然报大错。

  • 表格标签必须添加 tbody 标签。

  • class 要避讳为变为 className,因为 class 在 JS 里面是关键字。

  • JS 生命之源,单大括号插值语法

可插入语法

  1. JS简单的计算 <h1>我爱你{5000 * 2}年</h1>
  2. JS 内置的函数 <h1>我爱你{parseInt(10000.6)}年</h1>
  3. 插入变量 const year = 10000;<h1>我爱你{year}年</h1>
    注意,变量可以存储 JSX 语法:
    const a = <span>我爱你<em className="spec">10000</em>年</span>;
  4. 插入函数的执行{sum()} 和 允许插入IIFE。
  5. 插入三元运算符
    <h1>我爱你{3 > 8 ? 9 : 10000}年</h1>
  6. 插入自定义组件{<App><App/>}

不可插入语法

  1. 不能插入 for 循环
  2. 不能插入if语句
  3. 不能插入while语句
  4. 不能插入函数的声明
  5. 不能插入对象
  • src 动态属性值
    基本使用请记住 "大包引" ,大括号包住引号。

var star = 0 ;<img src = {`images/${star}.png`} />

  • 行内样式
    口诀:双大括号,标准JSON,省略 px,属性驼峰。
    注意:即使不需要将style属性变动态,也需要写成这样,这是规定。
<p style={{
    "width" : 200,
    "height" : 200,
    "backgroundColor" : "red"
}}></p>
  • 动态类名
    我们需要安装一个依赖:

npm install --save classnames

靠布尔值来决定这个类名是否生效:

<p className={classnames({
                    "cur" : true,
                    "pure" : true,
                    "color" : 3 > 8,
                    "red" : 0
                })}>你好</p>
  • JSX 中使用数组(很关键,同时也是难点、重点)

注意: JSX的单大括号中如果出现数组,数组会被自动展开。

var arr = ["点绛唇·梅","宋代:朱翌","流水泠泠,断桥横路梅枝亚。","雪花飞下,浑似江南画。","白璧青钱,欲买春无价。","归来也,风吹平野,一点香随马。"];
//================
<ul>
    {arr.map((item,index)=> <li key={index}>{item}</li>)}
</ul>
 
技术图片
 

React 中,JSX 数组项,每项都必须有独一无二的 key 属性。key 简单来说,react 利用 key 来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。每个 key 对应一个组件,相同的 key react 认为是同一个组件,这样后续相同的 key 对应组件都不会被创建. react 中的 key 属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置 key 之后不能获取组件的这个key props),而是给 react 自己用的。
key的使用场景?基本基本就是数组。
官方:在项目开发中,key 属性的使用场景最多的还是由数组动态创建的子组件的情况,需要为每个子组件添加唯一的 key 属性值。
注意:index 作为 key 是一种反模式。
在数组中生成的每项都要有 key 属性,并且 key 的值是一个永久且唯一的值,即稳定唯一。key 值的唯一是有范围的,即在数组生成的同级同类型的组件上要保持唯一,而不是所有组件的 key 都要保持唯一。
了解更多参考博客:React 之 key详解https://segmentfault.com/a/1190000009149186

对数组操作用到的最多的两个 ES 方法,就是上面 Map 和 filter。俗称:删 filter 改 Map 。

四、九九乘法表
 
技术图片
九九乘法表
render(){
    var arr = [];
    for(let i = 1;i <= 9; i++){
        let temp = [];
        for(let j = 1;j <= i;j++){
            temp.push(<td style={{border:"1px solid #353"}} key = {j}>{i} X {j} = {i*j}</td>)
        }
        arr.push(<tr key = {i}>{temp}</tr>);
    }
    return(
            <div>
                <table style={{
                    borderCollapse:"collapse"
                }}>
                    <tbody>
                        {arr}
                    </tbody>
                </table>
            </div>
        );
}
五、组件的 state、事件监听和 MVVM 模式

我们可以快速感知 React ,从一个小小的计数器开始一步步熟悉。


 
技术图片
计数器.gif
import React,{Component} from "react";

export default class App extends Component{
    constructor(){
        super();
        this.state = {
            a : 0
        }
    }
    render(){
        return (
            <div>
                <h1>{this.state.a}</h1>
                <button onClick = {()=>{
                    this.setState({
                        a : this.state.a + 1
                    })
                }}>按我加一</button>
                
                <button onClick = {()=>{
                    this.setState({
                        a : this.state.a - 2
                    })
                }}>按我减二</button>
            </div>
            )
    }
}

代码分析:

  • 组件的 state
    React 规定,任何实例允许有 state 属性,表示这个组件实例的数据。注意,construtor中 this 表示什么?表示实例,即 state 属性是组件的实例的属性。
    注意 state 必须是 state 属性,不能改名,state 属性的值必须是对象,不能是字符串、不能是数组等。在render中,可以使用单大括号,这样的写法,显示出state。
  • setState()
    箭头函数中要改变 state 对象的 a 属性值,此时必须用 setState 函数进行修改。React 规定,只有用 setState 来改变 state 界面才能自动更新;千万注意不能直接用 ++,-- 等一元运算符。
  • 事件监听
    在 2008 年,人们认识到了 HTML、CSS、JS 三层分离。所以我们原生 JS、jQuery 都分离的厉害,很明显现在我们让他们耦合在了一起。
    onClick={},这个 {} 中要放一个函数。注意这个函数必须是箭头函数,不能是 function。
六、变体写法

事件监听直接写在标签里面是在是太乱了,可以把事件提取出来,需要注意的是提取出来的事件需要绑定上下文的 this 。

    add(){
        this.setState({
            a : this.state.a + 10
        })
    }
    unadd(){
        this.setState({
            a : this.state.a - 10
        })
    }
    render(){
        return (
            <div>
                <h1>{this.state.a}</h1>
                <button onClick = {this.add.bind(this)}>按我加十</button>
                <button onClick = {this.unadd.bind(this)}>按我减十</button>
            </div>
            )
    }

这种写法简洁了,但是不能传参数,所以可以利用箭头函数的特性来规避这个问题。

import React,{Component} from "react";

export default class App extends Component{
    constructor(){
        super();
        this.state = {
            a : 0
        }
    }
    add(n){
        this.setState({
            a : this.state.a + n
        })
    }
    unadd(m){
        this.setState({
            a : this.state.a - m
        })
    }
    render(){
        return (
            <div>
                <h1>{this.state.a}</h1>
                <button onClick = {()=>{
                    this.add(100);
                }}>按我加一百</button>
                <button onClick = {()=>{
                    this.unadd(100);
                }}>按我减一百</button>
            </div>
            )
    }
}
 
技术图片
传参.gif
七、如何获取 DOM

无论是 Vue 还是 React 都是数据驱动视图,因此官方都不建议使用 DOM 操作,但是还是预留了这个 API 那就是 ref。2019-7-31 号的时候即之前的 React还是和 Vue 一样操作 DOM 基本相同都是使用 String 类型的 Refs 例如:<h1 ref="textInput "></h1> ,你可以通过 this.refs.textInput 来访问 DOM 节点。但现在 React 不建议使用它了,因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。

 
技术图片
存在 一些问题

现在官网建议用:

  • 回调函数
  • createRef

需要注意的是节点的引用可以在 ref 的 current 属性中被访问(三点):

  • 当 ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
  • 当 ref 属性用于自定义 class 组件时,ref 对象接收组件的挂载实例作为其 current 属性。
  • 你不能在函数组件上使用 ref 属性,因为他们没有实例

上面讲了函数没有实例,那怎么使用 ref 呢。答案是使用 forwardRef 方法。

const refA  = createRef();
function A(props,ref){
    return (
        <div>
            <h1 ref={ref}>i am A</h1>
        </div>
    )
}
A = forwardRef(A);
ReactDOM.render(<div>
    <A ref={refA}></A>
    <button onClick = {()=>{
        console.log(refA.current);//h1标签
    }}>点击</button>
</div>, document.getElementById("root"));

forwardRef 会使 A 函数多出来一个参数 ref ,不使用 forwardRef 方法,函数是没有第二个参数的。从效果来看 forwardRef 方法就是把函数变成类。refA.current 返回的是 h1 标签,我们还可以使用 useImperativeHandle 改写使其返回一个对象,注意?? 16.6.3 版本这个方法叫做 useImperativeMethods 。

function A(props, ref) {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
      focus: () => {
        inputRef.current.focus();
      },
      name:"Condor Hero",
      age:19
    }));
    return <input ref={inputRef} />;
}
A = forwardRef(A);

const refA  = createRef();
ReactDOM.render(<div>
    <h4>
        <A ref={refA}></A>
        <button onClick = {()=>{
            console.log(refA.current.name);
            console.log(refA.current);
        }}>点击</button>
    </h4>
</div>, document.getElementById("root"));
八、MVVM 思想

简单一句话,数据变化,视图自动变化。实现起来就是使用事件来操作 setState 让 其内部的值发生改变,视图自动更新。

来两个案例体验一下。第一个调色板:

双向数据绑定,简称双向绑定,再简称双绑。在 React 中也称为“受控”(under controlled)。

说一下 ref,在 React 中,任何元素都可以添加 ref 属性,表示 reference 引用



作者:学贤社
链接:https://www.jianshu.com/p/09992a2df4f3
来源:简书

以上是关于React 语法基本使用介绍的主要内容,如果未能解决你的问题,请参考以下文章

React入门概述 - 虚拟DOM与原生DOM - JSX语法 - React基本使用

React的jsx语法,详细介绍和使用方法!

Python基本语法与变量的相关介绍

JSX语法及特点介绍

VUE的基本语法

上手React Native--常用属性介绍