React入门

Posted 2022-11-28 webchang

概述

特点

1. 采用组件化模式、声明式编码，提高开发效率及组件复用率
2. 在 React Native中可以使用Reac语法进行移动端开发。
3. 使用虚拟DOM+优秀的 Diffing算法，尽量減少与真实DOM的交互。虚拟DOM无须真实DOM上那么多属性。

安装

npm i react react-dom

• react包是核心，提供创建元素、组件等功能
• react-dom包提供DOM相关功能等

基本使用

React.createElement方法和 vue中的h函数很像

<div id="root"></div>

<!--1.引入js文件-->
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>

<script>
  // 2.创建react元素
  // 参数一:元素名称或自定义的组件名称
  // 参数二:元素属性
  // 第三个及其以后的参数:元素的子节点
  let title = React.createElement('h1', null, 'hello react');

  // 3.渲染react元素
  // 第一个元素是要渲染的react元素，第二个参数是挂载点
  ReactDOM.render(title, document.getElementById('root'));
</script>

react脚手架

使用 React脚手架初始化项目，命令 npx create-react-app my-app
​

在脚手架中使用react。使用脚手架初始化完项目后，在src/index.js文件中输入以下代码：

// 1.导入react
import React from 'react'
import ReactDom from 'react-dom'

// 2.创建react元素
let title = React.createElement('p', id: 'p1', React.createElement('span', null, '文本'))

// 3.渲染react元素
ReactDom.render(title,document.getElementById('root'));

JSX

createElement的问题：不直观，无法一眼看出所描述的结构。

JSX基本使用

简介

JSX是javascript XML的简写，表示在JavaScript中写xml（html）的代码。JSX是react的核心内容。推荐使用JSX语法创建react元素，它更能体现react的声明式特点（描述UI长什么样子）
​
优势：声明式语法更加直观、于HTML结构相同，降低了学习成本，提升开发效率。

使用步骤

// 创建react元素
let title = <h1>hello <span>react</span></h1>
// 渲染
ReactDOM.render(title,document.getElementById('root'))

为什么脚手架中可以直接使用JSX语法

JSX不是标准的ECMAScript语法，它是ECMAScript语法的扩展。需要使用babel编译处理后才能在浏览器中运行。create-react-app中已经默认有该配置，无须手动配置。

使用到的包是@babel/preset-react

注意点

1. 只能有一个根元素。
2. react元素的属性名使用驼峰命名法
   1. class -> className
   2. for -> htmlFor
   3. tabindex -> tabIndex
3. 没有子节点的react元素可以使用 /> 单标签的形式结束。​

let title = <h1 className='title'>hello <span /></h1>

4. 推荐使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱

// 创建react元素
let title = (
  <h1 className='title'>
    hello 
    <span />
  </h1>
)

在JSX中使用JavaScript表达式

数据存储在JS的变量中，语法：JavaScript表达式 ，注意是单大括号。

注意区分js表达式和js语句代码：

• 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方，下面这些都是表达式:
  • a
  • demo
  • arr map()
  • function test ()
• 语句(代码)，下面这些都是语句(代码):
  • if()
  • for()
  • switch()(case: xxx1)

let name = '小明';
let age = 19;
let title = (
  <h1 className='title'>
    hello name,年龄：age
  </h1>
)

// 渲染
ReactDOM.render(title,document.getElementById('root'))

JSX中的条件渲染

根据条件渲染特定的JSX结构，可以使用if/else或三元运算符或逻辑与运算符来实现

if/else

// 条件渲染
let isLoading = true;
let loadData = () => 
  if (isLoading) 
      return (
        <div>loading数据加载中</div>
      )
  
  return (
    <div>数据加载完成</div>
  )


let title = (
  <div>
    条件渲染：loadData()
  </div>
)

// 渲染
ReactDOM.render(title,document.getElementById('root'))

​

三元表达式

let loadData = () => 
  isLoading ? (<div>loading数据加载中</div>) : (<div>数据加载完</div>)


let title = (
  <div>
    条件渲染：loadData()
  </div>
)

// 渲染
ReactDOM.render(title,document.getElementById('root'))

逻辑与运算符

适合显示与隐藏的场景

let loadData = () => 
  // 当isLoading为true的时候，显示文字。为false的时候，什么都不显示
  return isLoading && (<div>loading数据加载中</div>);


let title = (
  <div>
    条件渲染：loadData()
  </div>
)

// 渲染
ReactDOM.render(title,document.getElementById('root'))

JSX的列表渲染

如果要渲染一组数据，应该使用数组的map方法。渲染列表时应该添加key属性，key属性的值要保持唯一。map遍历谁，就给谁添加key属性。尽量避免使用索引号等可变化的属性作为key

let songs = [
   id: 1, name: '歌曲1' ,
   id: 2, name: '歌曲2' ,
   id: 3, name: '歌曲3' 
];

let list = (
  <ul>
    // 注意这里外层有一个大括号，表示内部要嵌入表达式了
    songs.map(item => <li key=item.id>item.name</li>)
  </ul>
)

// 渲染
ReactDOM.render(list, document.getElementById('root'))

JSX的样式处理

• 使用className添加类名，在样式文件中写样式并导入
• 使用style添加行内样式，注意要使用双层大括号。最外层的大括号代表内部是一个JavaScript表达式，里边的大括号就是一个普通的对象，每条键值对代表一条样式。样式属性名使用驼峰命名法，如backgroundColor

import React from 'react';
import ReactDOM from 'react-dom';

// 引入css文件
import './index.css';

let title = (
  <h1 className='title' style=color: 'red', backgroundColor: 'gray'>hello</h1>
)

// 渲染
ReactDOM.render(title, document.getElementById('root'))

react脚手架中对css的模块化处理

当我们创建了多个组件，同时在App.js文件中使用时，如果在这些组件中使用的类名相同，但是样式不同，最后就可能引起样式冲突。

• 创建css文件时，命名为xxx.module.css
  

• 导入：import hello from ‘./index.module.css’

• 使用：className的值设置为JS表达式的形式

import React,  Component  from 'react'
import hello from './index.module.css'

export default class Welcome extends Component 
  render() 
    return (
      <div>
        <h1 className=hello.title>welcome</h1>
      </div>
    )
  

资料

新手学习 react 迷惑的点

前端学习交流QQ群：862748629