React：组件基础篇
目录
创建项目
函数组件（无状态组件）
类组件（有状态组件）
函数组件绑定事件
通过类组件绑定事件
react事件对象
state基本使用
受控组件
非受控组件
创建项目
执行“nvm list”命令，查看当前所选择node的版本，因为我电脑上有几个不同的node版本，所以需要确认下，版本是否是react脚手架要求的。
如果发现node版本不是我们想要的，执行“nvm use 版本号”命令即可。
执行“npx create-react-app react-component”命令，创建项目。
执行“cd react-component”命令，进入文件夹内
执行“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、创建类组件
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指向问题
推荐使用受控组件来处理表单
写在最后
好兄弟可以点赞并关注我的公众号“javaAnswer”，全部都是干货。
