React组件基础

react组件

组件就是一个页面中的部分功能，多个组件实现完整的页面功能

特点：可复用、独立、可组合

react组件的创建

使用函数创建组件
- 函数名称必须以大写字母开头
- 函数必须有返回值（返回值为null时，表示不渲染任何内容）


// 使用函数创建组件
function Hello() {
  return (
    <div>Hello 组件！div>
  )
}
ReactDOM.render(<Hello />, document.getElementById('root'))

使用类创建组件

类名称也必须大写开头
类组件必须继承 React.component 父类，才可以使用父类中提供的方法和属性
类组件必须提供 render 方法
render 方法必须要有返回值，表示组价的结构


// 使用类创建组件
class Hello extends React.Component{
  render() {
    return 类创建组件！
  }
}
ReactDOM.render(<Hello />, document.getElementById('root'))

抽离组件为单独 JS文件

创建 Hello.js 文件
在 Hello.js 中导入 React
创建组件
导出这个组件
在index.js导入Hello 组件
渲染组件


//Hello.js
import React from 'react'
 
class Hello extends React.Component {
  render() {
    return (<div>Hello!div>)
  }
}
 
export default Hello
 
 
//index.js
// 导入Hello 组件
import Hello from './JS/Hello.js'
ReactDOM.render(<Hello />, document.getElementById('root'))

React事件处理

事件绑定
- 语法：on + 事件名称 = {事件处理方法} --- onClick = {...}
- React事件采用驼峰命名法 -----onClick 、 onFocus


// 函数事件绑定
function Hello() {
  function handleClick() {
    console.log('点击成功');
  }
  return (
    <button onClick={handleClick}>点击按钮button>
  )
}
 
ReactDOM.render(<Hello />, document.getElementById('root'))

事件对象
- 通过事件处理程序的参数获取到事件对象
- 不需要担心跨浏览器兼容性问题


// 事件处理
class Hello extends React.Component{
  handleClick(e) {
    // 阻止默认行为
    e.preventDefault()
    console.log('点击成功！');
  }
  render() {
    return <a href='www.baidu.com' onClick={this.handleClick}>点击a>
  }
}
ReactDOM.render(<Hello />, document.getElementById('root'))

组件状态

有状态组件（类）：负责页面交互，更新页面
无状态组件（函数）：静态结构的展示
状态（state): 状态即数据，是组件内部的私有数据，只能在组件内部使用
- state 的值是对象，表示一个组件中可以有多个数据
- 通过 this.state 来获取状态


// 组件状态
class Hello extends React.Component{
  // constructor() {
  //   super()
 
  //   // 初始化 state
  //   this.state = {
  //     count : 0
  //   }
  // }
 
  // 简化写法
  state = {
    count : 0  
  }
 
  render() {
    return (
      
        计算机: { this.state.count }

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

修改状态（setState）
- 语法：this.setState({...})
- 注意：不能直接修改 state 中的值
- setState作用：1.修改 State 2. 更新UI
- 思想：数据驱动视图


class Hello extends React.Component{
  // constructor() {
  //   super()
 
  //   // 初始化 state
  //   this.state = {
  //     count : 0
  //   }
  // }
 
  // 简化写法
  state = {
    count : 0  
  }
 
  render() {
    return (
      
        计算机: { this.state.count }
        
          this.setState({
            count : this.state.count + 1
          })
        }}>+1

)

}

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