React学习笔记_02

React 组件和状态

react 组件

• 1，组件的两种创建方式
  • 1，函数组件
  • 2，类组件

1，函数组件：使用 JS 的函数(箭头函数)创建的组件

约定：函数名必须以大写字母开头，函数组件必须有返回值，表示该组件的结构

function Hello() {
  return (
    <h1>哈哈哈哈</h1>
  )
}

渲染函数组件：用函数名作为组件标签名

ReactDOM.render(<Hello />, document.getElementById('root'))

2，类组件

使用的是ES6的class创建的组件

约定：1，类名称也必须以大写字母开头

2，类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性

3，类组件必须提供render()方法

4，render()方法必须有返回值，表示该组件的结构

class App extends React.Component {
  render() {
    return (
      <div>类组件的创建</div>
    )
  }
}
ReactDOM.render(<App/>, document.getElementById('root'))

组件抽离

抽离为单独的js文件中

// 步骤, 比如创建一个Hello.js

import React from 'react';
function Hello() {
  return (
    <div>Hello</div>
  )
}
export default Hello;

在别的文件引入Hello.js:
import Hello from './Hello'
ReactDOM.render(<Hello/>, document.getElementById('root'))

事件处理

• 事件绑定
  语法：on + 时间名称 = { 事件处理程序 }，比如onClick={() => {}}

class Hello extends React.Component {
  // 事件处理程序
  handleClick() {
    console.log('点击事件触发')
  }
  render() {
    return (
      <div onClick={this.handleClick}>事件绑定</div>
    )
  }
}
ReactDOM.render(<Hello/>, document.getElementById('root'))

或者

function Hello() {
  function handleClick() {
    console.log('事件触发')
  }
  return (
    <div onClick={handleClick}>事件绑定</div>
  )
}
ReactDOM.render(<Hello/>, document.getElementById('root'))

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

function Hello() {
  function handleClick(e) {
    e.preventDefault()
    console.log('事件触发')
  }
  return (
    <a href="https://editor.mdnice.com/?outId=3be364c8e1c9407d8c32e470d11a5201" onClick={handleClick}>事件绑定</a>
  )
}

状态

• 有状态组件：类组件又叫有状态组件
• 无状态组件：函数组件又叫无状态组件

状态(state)即数据

函数组件没有自己的状态，只负责数据展示(静)

类组件有自己的状态，负责更新UI，让页面动起来

组件中的 state 和 setState

• state 即数据
• 状态是私有的，只能在组件的内部使用
• state的值是对象，表示一个组件可以有多个数据

// 对状态初始化
class App extends React.Component {
  constructor(props) {
    super()
    this.state = {
      count: 0
    }
  }
  
  // 简化语法
  state = {
    count: 0
  }
  render() {
    return (
      <div>数字：</div>
    )
  }
}
ReactDOM.render(<App/>, document.getElementById('root'))

或者状态：this.state.xx

render() {
  return (
    <div>数字：{this.state.count}</div>
  )
}

setState

• 状态是可变的
• 语法：this.setState({需要修改的数据})
• 不要直接修改state中的值
• setState的作用： 1，修改state 2，更新UI
• 思想：数据驱动视图

render() {
  return (
    <div>
      <div>数字：{this.state.count}</div>
      <button onClick={() => {
        this.setState({
          count: this.state.count += 1
        })
      }}>+1</button>
    </div>
  )
}

从JSX中抽离出事件处理程序

• JSX 中掺杂过多的JS逻辑代码，会显得很混乱
• 推荐将逻辑抽离到单独的方法中，保证JSX结构清晰

 state = {
    count: 0
  }

  // 事件处理程序
  handleClick() {
    // 此时报错，此时的事件处理程序中的this是undefined
    this.setState({
      count: this.state.count += 1
    })
  }

  render() {
    return (
      <div>
        <div>数字：{this.state.count}</div>
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}

image

解决this是undefined的方法：

• 1，箭头函数
• 2，Function.prototype.bind()
• 3,class的实例方法

推荐使用class的实例方法

1，箭头函数

箭头函数自身是不绑定this的，箭头函数里的this并不是由箭头函数决定的，而是由外部环境决定的

handleClick() {
  this.setState({
    count: this.state.count += 1
  })
}

render() {
  return (
    <div>
      <div>数字：{this.state.count}</div>
      <button onClick={() => this.handleClick()}>+1</button>
    </div>
  )
}

利用bind方法：Function.prototype.bind()

constructor(props) {
  super()
  this.state = {
    count: 0
  }
  this.handleClick = this.handleClick.bind(this)
}
// state = {
//   count: 0
// }

// 事件处理程序
handleClick() {
  this.setState({
    count: this.state.count += 1
  })
}

render() {
  return (
    <div>
      <div>数字：{this.state.count}</div>
      <button onClick={this.handleClick}>+1</button>
    </div>
  )
}

class的实例方法

state = {
  count: 0
}

// 事件处理程序
handleClick = () => {
  this.setState({
    count: this.state.count += 1
  })
}

render() {
  return (
    <div>
      <div>数字：{this.state.count}</div>
      <button onClick={this.handleClick}>+1</button>
    </div>
  )
}