React从零基础入门

5月 1 2022 8 分钟读完 (约 1201 字)

学习前端3大框架之一的 React

准备工作

React脚手架初始化项目

1 2	nvm use 14 npx create-react-app my-app

启动项目：

1	npm start # yarn start

在脚手架中使用 React

1.导入react和react-dom两个包

1 2	import React from 'react' import ReactDOM from 'react-dom'

2.调用 React.createElement() 方法创建 react 元素

3.调用 ReactDOM.render() 方法渲染 react 元素到页面中

JSX 的基本使用

JSX的出现是为了解决 createElement() 函数创建 react 元素的痛点问题：
1.繁琐不简洁
2.不直观，无法一眼看出所描述的结构
3.不优雅，程序员体验不爽

JSX 是 JavaScript XML 的简写，即在JavaScript代码中写 XML(HTML) 格式代码。其优点在于声明式语法更加直观、与HTML语法结构相同，降低了学习成本、提高了开发效率。

为什么在js中可以使用 JSX 语法？

因为使用了 babel 进行语法解析的转化。
在 js 中插入 jsx 代码段建议用小括号廓起来，但也可以不用。

如何在 JSX 中引用 JavaScript 对象？

使用大括号将对象放在内：

/*
JSX 中使用 JavaScript 表达式
*/
const name = 'Alice'

const title = (
    <h1>Hello JSX, {name}</h1>
)

条件渲染

通过条件函数决定渲染不同的JSX代码

/*
    条件渲染
*/
const isLoading = false
const loadData = () => {
    if(isLoading) {
        return (<div>loading...</div>)
    }
    return (<div>数据加载完成，此处显示加载后的数据</div>)
}

const title = (
    <h1>条件渲染：
        {loadData()}
    </h1>
)

列表渲染

使用js数组的map方法

/*
    列表渲染
*/
const songs = [
    {id: 1, name: '听我说谢谢你'},
    {id: 2, name: '一路向北'},
    {id: 3, name: '南山南'}
]

const list = (
    <ul>
        {songs.map(item => <li>{item.name}</li>)}
    </ul>
)

上述代码虽然能显示，但是在控制台中会报告一个警告：

Warning: Each child in a list should have a unique “key” prop.

意思是建议每个 <li> 元素key属性应保持唯一，于是在li标签中添加key属性为item.id：

1	<li key={item.id}>{item.name}</li>

样式处理

1.行内样式——style

1
2
3

<h1 style = {{color: 'red', backgroundColor: 'skyblue'}}>
    JSX的样式处理
</h1>

这里解释一下双大括号的必要性，外层大括号表示在JSX中引入JavaScript对象，内层大括号表示JavaScript对象为一个键值对类型

2.类名——className(推荐)

//引入css
import './index.css'

<h1 className = "title">
    JSX的样式处理
</h1>

React 组件学习

组件是React的一等公民。一个组件表示页面中的部分功能，组合多个组件可以实现完整的页面功能。

1. 使用函数创建组件

函数组件：使用JS的函数（或Lambda函数）创建的组件
约定：1. 函数名称必须以大写字母开头；2. 函数组件必须有返回值，表示改组件的结构

/*
    使用函数创建组件
*/
function Hello() {
    return (
        <div>这是一个函数组件！</div>
    )
}

// 3 渲染 react 元素到 Web 页面
ReactDOM.render(<Hello />, document.getElementById('root'))

简洁一点，使用Lambda函数也是可以的：

1	const Hello = () => <div>这是一个函数组件！</div>

2. 使用class创建组件

类组件：使用ES6的class创建的组件。
约定： 1.类名称也必须以大写字母开头；
2.类组件应该继承 React.Component 父类
3.类组件必须重写 render() 方法
4.render() 方法必须有返回值，以表示该组件的结构

class Hello extends React.Component {
    render() {
        return <div>Hello, Class Component.</div>
    }
}

项目中的组件多了之后，可以使用多文件结构组织这些组件。
1.创建Hello.jsx
2.在Hello.jsx中导入React
3.创建组件（函数组件或类组件）
4.导出组件
5.在使用处导入Hello组件
6.渲染 react 元素

// 1 Hello.jsx
// 2 导入 react
import React from 'react'

// 3 创建 react 组件
class Hello extends React.Component {
    render() {
        return <div>这是一个抽离到jsx文件中的组件.</div>
    }
}

// 4 导出组件
export default Hello

import React from 'react'
import ReactDOM from 'react-dom'
// 5 在使用处导入Hello组件
import Hello from './Hello'

// 6 渲染 react 元素
ReactDOM.render(<Hello />, document.getElementById('root'))

React事件处理

1. React事件绑定

通用格式: on+事件名称={事件处理程序}
注意React事件采用驼峰命名法，故事件名称单词字母应大写。

使用类组件

class Hello extends React.Component {
    // 事件处理程序
    handleClick() {
        alert('单击事件出发了');
    }

    render() {
        return <button onClick={this.handleClick}>点我，点我</button>
    }
}

使用函数组件

function Hello() {
    // 事件处理程序
    function handleClick() {
        alert('单击事件触发了');
    }

    return <button onClick={handleClick}>点我，点我</button>
}

注意函数组件中调用函数不需要使用this.关键字。

2. 事件对象

通过给事件处理程序（handleClick）添加参数可以获取到事件对象。在React中，事件对象又叫做合成事件（对象）

function handleClick(e) {
    e.preventDefault()
    console.log('事件对象', e)
}
<a onClick={handleClick}>点我，不会跳转页面</a>

#React