React：组件基础篇

目录

• 创建项目

• 函数组件（无状态组件），负责静态结构展示

• 类组件（有状态组件），负责更新UI，让页面动起来

• 函数组件绑定事件

• 通过类组件绑定事件

• react事件对象

• state基本使用

• 受控组件：其值受到React控制的表单元素

• 非受控组件，不推荐使用，知道即可
  

创建项目

1. 执行“nvm list”命令，查看当前所选择node的版本，因为我电脑上有几个不同的node版本，所以需要确认下，版本是否是react脚手架要求的。
   

2. 如果发现node版本不是我们想要的，执行“nvm use 版本号”命令即可。
   

3. 执行“npx create-react-app react-component”命令，创建项目。

4. 执行“cd react-component”命令，进入文件夹内

5. 执行“npm start”命令，启动项目，ok
   

函数组件

无状态组件（函数组件），负责静态结构展示

1、导入react

import React from 'react';import ReactDOM from 'react-dom';

2、创建函数组件，这里有两种方式。

第一种

function Hello() {  return (<div>这是我的第一个函数组件</div>)}

第二种

const Hello = () => (<div>这是我的第二个函数组件</div>)

3、渲染组件

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

完整代码如下：

类组件

有状态组件（类）组件，负责更新UI，让页面动起来

1、创建类组件

class Hello extends React.Component { render() { return (<div>第一个类组件</div>) }}

2、渲染组件

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

完整代码如下：

函数组件绑定事件

1、创建函数组件

function App() { // 事件处理程序 function handleClick() { console.log('函数组件，事件触发')  } return ( <button onClick={handleClick}>点我</button> )}

2、渲染组件

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

完整代码如下：

通过类组件绑定事件

1、创建类组件

class App extends React.Component { // 事件处理程序 handleClick() { console.log('类组件绑定事件，触发')  } render() { return (<button onClick={this.handleClick}>点我</button>) }}

2、渲染组件

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

完整代码如下：

React事件对象

1、阻止浏览器的默认行为

class App extends React.Component { // 事件处理程序 handleClick(e) { // 阻止浏览器的默认行为 e.preventDefault() console.log('a标签单击事件触发')  } render() { return (<a href='https://www.baidu.com/' onClick={this.handleClick}>百度一下</a>) }}

2、渲染组件

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

完整代码如下

state基本使用

1、创建类组件

// 2、创建类组件class App extends React.Component { // 初始化state state = { count: 100} // 事件处理程序 onIncrement = () => { this.setState({ count : this.state.count - 1 })  } render() { return ( <div> <h1>计数器：{this.state.count}</h1>        <button onClick={this.onIncrement}> -1 </button> </div> ) }}

2、渲染组件

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

完整代码如下：

受控组件：其值受到React控制的表单元素

1、创建类组件

class App extends React.Component { state = { txt: '', content: '', language: 'java', isChecked: false } // 处理变化 handleForm = e => { // 获取当前DOM对象 const target = e.target // 根据表单类型获取值 const value = target.type === 'checkbox' ? target.checked : target.value // 获取name const name = target.name // 根据name属性设置对应state this.setState({ [name]: value })    } render() { return ( <div> {/* 文本框 */} <input type='text' name='txt' value = {this.state.txt} onChange={this.handleForm}/> <br/> {/* 富文本框 */} <textarea name='content' value={this.state.content} onChange={this.handleForm}></textarea> <br/> {/* 下拉框 */} <select name='language' value={this.state.language} onChange={this.handleForm}> <option value='java'>java</option> <option value='javaScript'>javaScript</option> <option value='c'>C</option> </select> <br/> {/* 复选框 */} <input name='isChecked' type='checkbox' checked={this.state.isChecked} onChange={this.handleForm}/> </div> ) } }

2、渲染组件

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

2、渲染组件

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

完整代码如下：

注意事项

• 组件的两种创建方式：函数组件和类组件(注意首字母大写)

• 无状态组件（函数）组件，负责静态结构展示

• 有状态组件（类）组件，负责更新UI，让页面动起来

• 绑定事件注意this指向问题

• 推荐使用受控组件来处理表单

写在最后