React学习 | 青训营

德芙39
67 阅读6分钟

React知识整理

React概述

  • 什么是React
    React 是一个用于构建用户界面的 JavaScript 库，主要用来写 HTML 页面，或构建 Web 应用。从 MVC 的角度来看，React 仅仅是视图层（V），就是负责视图的渲染，并非提供了完整的 M 和 C 的功能。

  • React特点
    声明式、基于组件、学习一次可随处使用

  • 特点解释
    声明式：只需要描述 UI（HTML）看起来是什么样，和写 HTML 一样，React 负责渲染 UI，并在数据变化时更新 UI；
    基于组件：组件是 React 最重要的内容，组件表示页面中的部分内容，组合、复用多个组件，可以实现完整的页面功能；
    学一次可随处使用：React 可以开发 Web 应用、移动端原生应用（React-Native）、 VR（虚拟现实）应用（React 360）等；

React基本使用

  • 安装
    命令npm i react react-dom，react 包是核心，提供创建元素、组件等功能。react-dom 包提供了 DOM 相关功能。

  • 使用
    引入 react 和 react-dom 两个文件，创建React元素，最后渲染React元素到页面中

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

<div id="root"></div>
<script>
  const title = React.createElement('h1', null, 'Hello React')
  ReactDOM.render(title, document.getElementById('root'))
</script>

React.createElement()
返回值为 React 元素；第一个参数为要创建的 React 元素名称，第二个参数为该 React 元素的属性，第三个为该 React 元素的子节点
ReactDOM.render()
第一个参数为要渲染的 React 元素，第二个参数为 DOM 对象，用于指定渲染到页面中的位置

React脚手架的使用

  • 意义
    脚手架是开发现代 web 应用的必备；充分利用 webpack、Babel、ESLint 等工具辅助项目开发；零配置，无需手动配置繁琐的工具即可使用；更关注业务

  • 使用React脚手架初始化项目
    初始化项目，命令npx create-react-app my-app；启动项目，项目根目录执行命令npm start

  • 在脚手架中使用React
    导入 react 和 react-dom 两个包；调用 React.createElement() 方法创建 react 元素；调用 ReactDOM.render() 方法渲染 react 元素到页面中

JSX的基本使用

  • createElement() 存在的问题
    繁琐、不直观、不优雅、用户体验不佳等

  • JSX简介
    JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码，是 React 的核心内容

  • 使用
    使用 JSX 语法，创建 react 元素
    const title = <h1>Hello JSX</h1>
    使用 ReactDOM.render() 方法渲染 react 元素到页面中 ReactDOM.render(title, root)

  • 使用JSX的注意点
    React 元素的属性名使用驼峰命名法；
    特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex；
    没有子节点的 React 元素可以用 /> 结束；
    使用小括号包裹 JSX，从而避免 JS 中的自动插入分号陷阱

  • JSX 中使用 JavaScript 表达式
    数据存储在JS中，语法{ JavaScript 表达式 }

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

const loadData = () => {
  if(isLoading) {
    return <div>数据加载中，请稍后...</div>
  }
  return (
    <div>书记加载完成，此处显示加载后的数据</div>
  )
}

const dv = (
  <div>{ loadData() }</div>
)
  • JSX 的列表渲染
    若要渲染一组数据，应该使用数组的 map() 方法。渲染列表时应该添加 key 属性， key 属性的值唯一。 map() 遍历谁，就给谁添加 key 属性，且要避免使用索引号作为 key 。
const songs = [
  { id: 1, name: '人物1' },
  { id: 2, name: '人物2' },
  { id: 3, name: '人物3' },
]

const list = (
  <ul>
    { songs.map(item => (<li key={item.id}>{item.name}</li>))}
  </ul>
)
  • JSX 的样式处理

行内样式 style
<h1 style={{ color: 'red', backgroundColor: 'white' }}></h1>
类名 className
<h1 className="title"></h1>

React组件

  • 介绍
    组件是 React 的一等公民，使用 React 就是在用组件，组件可表示页面中的部分内容。将多个组件组合实现完整的页面功能，组件的特点有可复用、独立、可组合

  • 创建方式

使用函数创建
函数组件：使用 JS 的函数（或箭头函数）创建的组件
函数名称必须以大写字母开头
必须有返回值，表示该组件的结构。如果返回值为 null，表示不渲染任何内容
使用类创建组件
使用 ES6 的 class 创建的组件
类名称也必须是以大写字母开头
应该继承 React.Component 父类，从而使用父类中的方法或属性
必须提供 render() 方法且有返回值，表示该组件的结构

  • React事件处理

事件绑定
React 事件绑定语法与 DOM 事件语法相似
语法：on+事件名称={事件处理程序}
React 事件采用驼峰命名法

# 函数组件绑定事件
function App() {
  function handleClick() {
    console.log('单击事件触发了');
  }
  return (
    <button onClick={handleClick}>点击</button>
  )
}

# 类组件绑定事件
class App extends React.Component {
  handleClick() {
    console.log('单击事件触发了')
  }
  render() {
    return (
      <button onClick={this.handleClick}>点击</button>
    )
  }
}

事件对象
可以通过事件处理程序的参数获取到事件对象
React 中的事件对象叫做：合成事件（对象），合成事件兼容所有浏览器，无需担心跨浏览器的兼容性问题

function handleClick(e) {
  e.preventDefault()
  console.log('事件对象', e)
}
<a onClick={handleClick}>点击</a>

  • 有状态组件和无状态组件
    函数组件又称为无状态组件，类组件又称为有状态组件，状态即数据
    函数组件没有自己的状态，只负责数据展示；类组件有自己的状态，负责更新 UI ，让页面动起来

  • 组件中的 state 和 setState
    state 的值是对象，表示一个组件中可以有多个数据
    setState() 用于修改状态，语法this.setState({ 要修改的数据 })

  • 事件绑定this指向
    箭头函数，利用箭头函数自身不绑定 this 的特点，render() 方法中的 this 为组件实例，可以获取到 setState()
    Function.prototype.bind()，利用 ES5 中的 bind 方法，将事件处理程序中的 this 与组件实例绑定一起

  • 表单处理

受控组件：其值受到 React 控制的表单元素
HTML 中的表单元素是可输入的，有自己的可变状态，React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改
React 将 state 与表单元素值 value 绑定到一起，由 state 的值来控制表单元素的值

class Hello extends React.Component {
  state = {
    name: ''
  }
  render() {
    return (
      <input type="text" value="{ this.state.name }" onChange={e => this.setState({ name: e.target.value })}/>
    )
  }
}

非受控组件（DOM方式）
借助于 ref，使用原生 DOM 方式来获取表单元素值， ref 用于获取 DOM 组件

# 调用 React.createRef() 方法创建一个 ref 对象
constructor() {
  super()
  this.txtRef = React.createRef()
}

# 将创建好的 ref 对象添加到文本框中
<input type="text" ref="{ this.txtRef }"/>

# 通过 ref 对象获取到文本框的值
console.log(this.txtRef.current.value)
小结

有关 React 的相关知识还有很多需要我去接触学习，所以后期也会继续深入了解，尽量将知识点进行完善。同时更需要通过实践尝试去实际体会，加深理解。

avatar
文章
阅读
粉丝