【React从0开始】基础篇

笔记为React入门到实战(2022全网最新）课程笔记

React特点

1. 声明式UI。直接用类似html的JSX编写，不需要再操作DOM。
2. 组件化。把页面拆分成一个个组件，组件可以服用组合，通过组件的抽象可以增加复用能力和提高可维护性。
3. 跨平台。可以开发多种平台上的应用。

环境初始化

使用脚手架搭建项目
npx create-react-app react-basic
入口文件说明

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件App
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

JSX基础

样式处理

添加样式：className
通过类名传递样式：

import './app.css'
const showTitle = true
function App() {
  return (
    <div className="App">
      <div className={ showTitle ? 'title' : ''}>this is a div</div>
    </div>
  )
}
export default App

内联样式：style={}
1.{}内写css

function App() {
  return (
    <div className="App">
      <div style={{ color: 'red' }}>this is a div</div>
    </div>
  )
}
export default App

2. {}内传变量

const styleObj = {
    color:red
}

function App() {
  return (
    <div className="App">
      <div style={ styleObj }>this is a div</div>
    </div>
  )
}

export default App

展示数据

• 字符串：直接“”
• 动态绑定的值（转义到js）：{}

条件渲染

JSX可作为变量值传递
实现：可以使用 三元运算符 或 逻辑与(&&)运算符

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);
//or
<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

渲染列表

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

注意点：需要为遍历项添加 key 属性

注意事项

1. JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor
4. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现

React组件基础

创建组件

分为：

• 函数组件
  定义函数，函数内用return ()返回UI结构。
• 类组件
  使用ES6的class创建的组件

class HelloC extends React.Component {
  render () {
    return <div>这是我的第一个类组件!</div>
  }
}

事件绑定

语法：on + 事件名称 = { 事件处理程序 }（📣驼峰命名法）
获取参数

• 事件对象
  在事件回调函数中补充一个形参e
• 额外参数
  将事件绑定写为箭头函数,完成额外参数传递
  <button onClick={(e) => onDel(e, item.id)}>x</button>

类组件事件绑定
主要注意this的指向，都使用箭头函数定义事件

组件状态

在React hook出来之前，函数式组件是没有自己的状态的。这里先说类组件：

1. 初始化状态：使用class的实例属性state初始化
2. 读取状态：this.state读取
3. 修改状态：使用组件提供的this.setState进行修改
   数据驱动视图，使用setState修改数据状态，UI也会更新。
   📣不直接修改状态的值，通过setState基于当前值创建新的值

class Counter extends React.Component {
  // 定义数据
  state = {
    count: 0
  }
  // 定义修改数据的方法
  setCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  // 使用数据 并绑定事件
  render () {
    return <button onClick={this.setCount}>{this.state.count}</button>
  }
}

表单处理

受控表单组件

什么是受控组件

input框自己的状态被React组件状态控制。React将state与表单元素的值（value）绑定到一起，由state的值来控制表单元素的值，从而保证单一数据源特性。
通过input框的change事件，每次改变将更新的value赋值给state状态。

class InputComponent extends React.Component {
  // 声明组件状态
  state = {
    message: 'this is message',
  }
  // 声明事件回调函数
  changeHandler = (e) => {
    this.setState({ message: e.target.value })
  }
  render () {
    return (
      <div>
        {/* 绑定value 绑定事件*/}
        <input value={this.state.message} onChange={this.changeHandler} />
      </div>
    )
  }
}

非受控表单组件

使用react创建ref对象，绑定dom

class InputComponent extends React.Component {
  // 使用createRef产生一个存放dom的对象容器
  msgRef = createRef()

  changeHandler = () => {
    console.log(this.msgRef.current.value)
  }

  render() {
    return (
      <div>
        {/* ref绑定 获取真实dom */}
        <input ref={this.msgRef} />
        <button onClick={this.changeHandler}>click</button>
      </div>
    )
  }
}