react基础知识（一）

jsx

概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构

作用：在React中创建HTML结构（页面UI结构）

优势：

1. 采用类似于HTML的语法，降低学习成本，会HTML就会JSX
2. 充分利用JS自身的可编程能力创建HTML结构

1、jsx表达式

const name = 'wfz'
<h1>你好，我叫{name}</h1>

2、jsx列表渲染

// 列表渲染
const songs = [
  { id: 1, name: '演员' },
  { id: 2, name: '消愁' },
]

function App() {
  return (
    <div className="App">
      <ul>
        {
          songs.map(item => <li>{item.name}</li>)
        }
      </ul>
    </div>
  )
}

export default App

3、条件渲染，可以使用 三元运算符 或 逻辑与(&&)运算符

const flag = true
function App() {
  return (
    <div className="App">
      {/* 条件渲染字符串 */}
      {flag ? 'react' : 'vue'}
      {/* 条件渲染标签/组件 */}
      {flag ? <span>this is span</span> : null}
    </div>
  )
}
export default App

4、jsx样式

function App() {
  return (
    <div className="App">
      <div style={{ color: 'red' }}>红色</div>
    </div>
  )
}

export default App

组件

函数组件

// 定义函数组件
function HelloFn () {
  return <div>函数组件!</div>
}
export default HelloFn

类组件

// 引入React
import React from 'react'
// 定义类组件
class Hello extends React.Component {
  render () {
    return <div>类组件</div>
  }
}
export default Hello

事件绑定

函数组件事件绑定

function HelloFn () {
  // 定义事件回调函数
  const handleClick = () => {
    console.log('事件触发')
  }
  return (
    // 绑定事件
    <button onClick={handleClick}>点击</button>
  )
}
// 获取事件对象
function HelloFn1 () {
  // 定义事件回调函数
  const clickHandler = (e) => {
    console.log('事件触发', e)
  }
  return (
    // 绑定事件
    <button onClick={clickHandler}>点击</button>
  )
}

// 传递额外参数
// onClick={ handleDel } -> onClick={ () => handleDel(id) }
// 注意: 一定不要在模板中写出函数调用的代码 onClick = { handleDel(id) }
const TestComponent = () => {
  const list = [
    {
      id: 1,
      name: 'react'
    },
    {
      id: 2,
      name: 'vue'
    }
  ]
  const handleDel = (e, id) => {
    console.log(e, id)
  }
  return (
      <ul>
        {list.map(item =>（
           <li key={item.id}>
                {item.name}
                <button onClick={(e) => handleDel(e, item.id)}>x</button>
           </li>
        ))}
      </ul>
  )
}
export default TestComponent

类组件事件绑定

import React from "react"
class Component extends React.Component {
  clickHandler = (e, num) => {
    // 这里的this指向的是当前的组件实例对象，可以通过this关键词拿到组件实例身上的其他属性或者方法
    console.log(this)
  }
  clickHandler1 () {
    // 这里的this 不指向当前的组件实例对象而指向undefined，存在this丢失问题
    console.log(this)
  }
  render () {
    return (
      <div>
        <button onClick={(e) => this.clickHandler(e, '123')}>click me</button>
        <button onClick={this.clickHandler1}>click me</button>
      </div>
    )
  }
}
function App () {
  return (
    <div>
      <Component />
    </div>
  )
}

export default App

组件状态

• 通过class的实例属性state来初始化
• state的值是一个对象结构，表示一个组件可以有多个数据状态
• 通过this.state来获取状态
• 通过this.setState({ })来修改state中的状态
• 不要直接修改状态的值，而要基于当前状态创建新的状态值

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>
  }
}