React基本概念和用法(一)

React安装

React.js不能单独使用,因为React.js 不管在开发阶段生产阶段都需要工具和库辅助, 可以使用React官网推荐的create-react-app React脚手架工具,可以一键生成项目目录,开箱即用

在安装React之前需要安装Node.js环境和npm

image-20201027171023426

Node.js环境安装好后,安装React脚手架工具

npm install -g create-react-app

安装好后运行create-react-app 的命令来创建一个项目目录

create-react-app hello-react

这条命令帮我们创建名为 hello-react的项目文件,并安装项目所需要的依赖

通过npm启动项目

cd hello-react
npm start

运行后会自动打开浏览器,可以看到项目运行成功后的界面

image-20201027172404521

看到这个页面说明React已经安装成功

使用JSX来操作页面

先看一个示例代码

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
  render () {
    return (
      <div>
        <h1>kkfive.com</h1>
      </div>
    )
  }
}

ReactDOM.render(
  <Header />,
  document.getElementById('root')
)

在首行我们从react引入的ReactReact.js组件父Component ,以后只要写React的组件,都必须引入这两个东西

在第二行在react-dom中引入了ReactDOMReactDOM可以帮助我们把 React 组件渲染到页面上去

JSX原理

JSXJavaScript 语言的一种语法扩展,长得像 HTML,但并不是 HTML

  • 它可以作为值使用
  • 它也不是HTML
  • 它可以配合JavaScript 表达式一起使用
  • 它并不是字符串
  • JSX 在编译的时候会变成相应的 JavaScript 对象描述

JSX可以让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法,编译的过程会把类似 HTMLJSX 结构转换成 JavaScript 的对象结构。简单的说 所谓的 JSX 其实就是 JavaScript 对象

理解这种表示HTML结构的信息对象后,就可以去构造真正的DOM元素,然后将这个DOM元素放在页面中,这就是ReactDOM.render 的作用

ReactDOM.render(
  <Header />,
  document.getElementById('root')
)

ReactDOM.render 的作用是把组件渲染并且构造成DOM树,然后插入到页面特定的元素中

整个执行过程如下图

image-20201027180618629

组件的redner方法

在编写React.js组件时,一般都需要继承Component,一个组件类必须要有一个render方法,这个render方法返回一个JSX元素

注意:返回的JSX元素必须要有一个外层元素包裹,返回并列的多个JSX元素是错误的

错误写法

render () {
  return (
    <div>第一个</div>
    <div>第二个</div>
  )
}

正确写法

render () {
  return (
    <div>
      <div>第一个</div>
      <div>第二个</div>
    </div>
  )
}

表达式插入

JSX 当中可以插入 JavaScript 的表达式,表达式返回的结果会渲染到页面上。表达式用 {} 包裹

render () {
  const test = 'Word'
  return (
    <div>
      <h1>Hello {test}</h1>
    </div>
  )
}

页面上就会显示 ”Hello Word “{}中也可以写成一个函数表达式

render () {
  return (
    <div>
      <h1>Hello {(function () { return 'Word'})()}</h1>
    </div>
  )
}

总结:{}可以放任何的JavaScript代码,包括变量,计算,函数等等

表达式还可以作用在标签的属性上

render () {
  const className = 'header'
  return (
    <div className={className}>
      <h1>kkfive.com</h1>
    </div>
  )
}

上述代码为div标签添加一个header类名

在React.js中不能直接使用class给元素添加类型,因为class是JavaScript中的关键字,所以需要替换成className来给元素添加类名

条件返回

因为{}可以放置任何表达式,所以也可以放JSX,那么可以在render函数内部根部不同条件返回的不同的JSX

render () {
  const isFun = true
  return (
    <div>
      <h1>
        Hello
        {isFun
          ? <strong> LiSi</strong>
          : <span>Zhang San </span>
        }
      </h1>
    </div>
  )
}

如果在表达式里面返回null,那么什么都不会显示,等于忽略表达式,根据此特性可以实现显示或者隐藏元素功能

render () {
  const isFun = true
  return (
    <div>
      <h1>
        Hello
        {isFun
          ? <strong> Word</strong>
          : null
        }
      </h1>
    </div>
  )
}

isFuntrue的时候显示 <strong> Word</strong>false的时候就隐藏

JSX元素变量

JSX元素可以像JavaScript对象一样,可以赋值变量,作为函数参数传递或者作为函数的返回值

render () {
  const isFun = true
  const LS = <strong> Li Si</strong>
  const ZS = <span> Zhang San</span>
  return (
    <div>
      <h1>
        Hello
        {isFun ? LS : ZS}
      </h1>
    </div>
  )
}
renderGoodWord (Ls, ZS) {
  const isFun = true
  return isFun ? Ls : ZS
}

render () {
  return (
    <div>
      <h1>
        Hello
        {this.renderGoodWord(
          <strong> Li Si</strong>,
          <span> Zhang San</span>
        )}
      </h1>
    </div>
  )
}

组件的组合,嵌套和组件树

组合/嵌套

假设现在有两个组件 TitleHeader,并且在 Header 组件中使用 Title 组件

class Title extends Component {
  render () {
    return (
      <h1>Hello Word</h1>
    )
  }
}

class Header extends Component {
  render () {
    return (
      <div>
        <Title />
      </div>
    )
  }
}

React会在 <Title /> 所有在的位置把Title 组件中render方法里的JSX内容渲染

也就是说 <h1>Hello Word</h1> 会显示在<Title />的位置上

image-20201027193315234

如果连续使用三个<Title />,那么 <h1>Hello Word</h1> 就会显示三遍

<div>
  <Title />
  <Title />
  <Title />
</div>

image-20201027193416736

这样可以提高组件的复用性和灵活性

注意:自定义的组件都必须要用大写字母开头,普通的 HTML 标签都用小写字母开头

组件树

创建三个组件HeaderMain,``Footer,然后由一个Index`组件把他们组合起来

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Title extends Component {
  render() {
    return <h1>This is Title</h1>;
  }
}

class Header extends Component {
  render() {
    return (
      <div>
        <Title />
        <h2>This is Header</h2>
      </div>
    );
  }
}

class Main extends Component {
  render() {
    return (
      <div>
        <h2>This is Main</h2>
      </div>
    );
  }
}

class Footer extends Component {
  render() {
    return (
      <div>
        <h2>This is Footer</h2>
      </div>
    );
  }
}

class Index extends Component {
  render() {
    return (
      <div>
        <Header />
        <Main />
        <Footer />
      </div>
    );
  }
}

ReactDOM.render(<Index />, document.getElementById("root"));

打开页面会显示

image-20201027193953040

组件可以和组件结合在一起使用,组件可以在内部使用别的组件,组件之间这样的嵌套,会形成一个组件树

image-20201027194136142

Index中用了HeaderMainFooter,然后Header又使用了 Title


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!