04- React中的基础组件

虚心学习ing
140 阅读4分钟

一、React组件介绍

组件表示页面中的部分功能

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

二、组件创建方式

1、使用函数创建组件

  • 函数组件：使用JS的函数创建组件
  • 规范1: 函数名称必须以大写字母开头
  • 规范2: 函数组件必须有返回值，表示该组件的结构
  • 规范3: 如果返回null，表示不渲染任何内容
function Hello() {
  return (
  	<div>这是我的第一个函数组件！</div>
  )
}
// 组件渲染
ReactDOM.render(<Hello />,document.getElementById('root'))

2、使用类创建组件

  • 类组件：使用ES6的class创建的组件
  • 规范1：类名称必须首字母大写
  • 规范2: 类组件应该继承React.Component父类，从而可以使用父类提供的方法或者属性
  • 规范3: 类组件必须提供render() 方法
  • 规范4: render() 方法必须有返回值，表示该组件的结构
class Hello extends React.Component {
  render() {
    return <div>Hello Class Component!</div>
  }
}

// 组件渲染
ReactDOM.render(<Hello>,document.getElementById('root'))

三、抽离组件

Hello.js

import React from 'react'

// 创建组件
class Hello extends React.Component {
  render() {
    return (
    	<div>this is my js file for react component</div>
    )
  }
}

// 导出组件
export default Hello

index.js

import Hello from './Hello.js'

// 组件渲染
ReactDOM.render(<Hello>,document.getElementById('root'))

四、事件处理

1. 事件绑定

  • React事件绑定语法与DOM事件语法相似
  • 语法：on + 事件名称 = （事件处理程序）
  • 注意：React事件采用驼峰命名法。如：onMouseEnter、onFocus

1、类组件

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

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

2、函数组件

function App() {
  function handleClick() {
    console.log('点击事件触发了')
  }
  
  return (
  	<button onClick={handleClick}>点我</button>
  )
}

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

2、事件对象

  • 可以通过事件处理程序的参数获取到事件对象
  • React中的事件对象叫做：合成事件（对象）
  • 合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题
class App extends React.Component {
  handleClick(e) {
    // 事件对象 e
    e.preventDefault() // 阻止浏览器默认行为
    console.log('点击事件触发了')
  }
  render() {
    return (
    	<a href="http://itcast.cn/" onClick = {this.handleClick}></a>
    )
  }
}

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

五、有状态组件和无状态组件

  • 函数组件又叫无状态组件，类组件又叫有状态组件
  • 状态（state）即数据
  • 函数组件没有自己的状态，只负责数据展示（静）
  • 类组件有自己的状态，负责更新UI，让页面 “动” 起来
class App extends React.Component {
  /**
  	constructor() {
  		super()
  		// 初始化state
  		this.state = {
  			count: 0
 		 	}
  	}
  */
  
  // 简化语法初始化state（推荐）
  state = {
    count: 10
  }
  
  render() {
    return (
    	<div>
      	<h1>计数器：{ this.state.count }</h1>
      </div>
    )
  }
}

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

1、setState()修改状态

  • 状态是可变的
  • 语法：this.setState({要修改的数据})
  • 注意：不要直接修改state中的值
  • setState() 作用：1.修改state 2.更新UI
class App extends React.Component {
  
  // 简化语法初始化state（推荐）
  state = {
    count: 10
  }
  
  updateCountHandle(){
     this.setState({
         count:this.state.count+1
      })
   }
  
  render() {
    return (
    	<div>
        <h1>计数器：{ this.state.count }</h1>
        
        // 箭头函数中的this只想外部环境，此处为reder()方法
        <button onClick={() => this.updateCountHandle()}></button>
      </div>
    )
  }
}

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

2、事件绑定this指向问题第二种

class App extends React.Component {
  constructor() {
    super()
    
    this.state = {
   	 count: 10
  	}
    this.updateCountHandle = this.updateCountHandle.bind(this)
  }
  
  
  updateCountHandle(){
     this.setState({
         count:this.state.count+1
      })
   }
  
  render() {
    return (
    	<div>
        <h1>计数器：{ this.state.count }</h1>
        // 箭头函数中的this只想外部环境，此处为reder()方法
        <button onClick={this.updateCountHandle()}></button>
      </div>
    )
  }
}

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

3、事件绑定this指向问题第三种

class App extends React.Component {
  state = {
   count: 10
  }
  
  updateCountHandle = () => {
     this.setState({
         count:this.state.count+1
      })
   }
  
  render() {
    return (
    	<div>
        <h1>计数器：{ this.state.count }</h1>
        // 箭头函数中的this只想外部环境，此处为reder()方法
        <button onClick={this.updateCountHandle()}></button>
      </div>
    )
  }
}

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

六、表单处理

1、受控组件

  • React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值
  • 受控组件：其值受到React控制的表单元素
class App extends React.Component {
  state = {
    txt: '',
    content:'',
    city:'bj',
    isChecked:false
  }
  
  updateTextHandle = (e) => {
     this.setState({
         txt: e.target.value
      })
   }
  
  updateContentHandle = (e) => {
    this.setState({
      content: e.target.value
    })
  }
  
  updateCityHandle = (e) => {
    this.setState({
      city: e.target.value
    })
  }
  
  updateCheckedHandle = (e) => {
    this.setState({
      isChecked: e.target.checked
    })
  }
  
  render() {
    return (
    	<div>
        <h1>计数器：{ this.state.txt }</h1>
       	{/*箭头函数中的this只想外部环境，此处为reder()方法*/} 
        <input type="text" value={this.state.txt} onChange={this.updateTextHandle}></input>
        {/*富文本框*/}
        <textarea value={this.state.content} onChange={this.updateContentHandle} ></textarea>
      	{/*下拉框*/}
        <select value={this.state.city} onChange={this.updateCityHandle}>
        	<option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        {/*复选框*/}
        <input type="checkbox" checked={this.state.isChecked} onChange={this.updateCheckedHandle}></input>
      </div>
    )
  }
}

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

1、优化受控组件处理

  • 给表单元素添加name属性，名称与state相同
  • 根据表单原属类型获取对应值
  • 在change事件处理程序中通过[name]来修改对应的state
class App extends React.Component {
  state = {
    txt: '',
    content:'',
    city:'bj',
    isChecked:false
  }
  
  updateHandle = (e) => {
    // 获取当前的DOM对象
    const target = e.target
    // 根据类型获取值
    const value = target.type === 'checkbox'?target.checked:target.value
    // 获取name
    const name = target.name
    
    this.setState({
         [name]: value
      })
   }
  
  render() {
    return (
    	<div>
        <h1>计数器：{ this.state.txt }</h1>
       	{/*箭头函数中的this只想外部环境，此处为reder()方法*/} 
        <input type="text" name="txt" value={this.state.txt} onChange={this.updateHandle}></input>
        {/*富文本框*/}
        <textarea name="content" value={this.state.content} onChange={this.updateHandle} ></textarea>
      	{/*下拉框*/}
        <select name="city" value={this.state.city} onChange={this.updateHandle}>
        	<option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        {/*复选框*/}
        <input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.updateHandle}></input>
      </div>
    )
  }
}

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

1、非受控组件

class App extends React.Component {
  constructor() {
    super()
    
    // 创建ref
    this.txtRef = React.createRef()
  }
  
  // 获取文本框的值
  getTxt = () => {
    console.log('文本框值为：'，this.txtRef.current.value)
  }
  
  render() {
    return (
    	<div>
      	<input type="text" ref={this.txtRef} />
        <button onClick={this.getTxt}>获取文本框的值</button>
      </div>
    )
  }
}
avatar
文章
阅读
粉丝