React 自学（二）

开始学习组件
组件的特点：可复用，独立，可组合。
学习目标：

• 创建组件
• 创建独立组件
• React事件绑定
• 有状态组件和无状态组件
• state&&setState（）
• this指向问题

一、创建组件两种方式分别为：使用函数创建组件和使用类创建组件。

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

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

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

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

class Hello extends React.Component{
render(){
return <div>class Component</div>
}}

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

二、创建独立的组件

1. 在src目录下创建Hello.js。
2. 在hello.js中书写组件代码。

import React from 'react';

// 创建组件
class Hello extends React.Component{
render(){
return(
<div>创建组件</div>
)}}

//导出
export default Hello;

3.返回index.js,引入并渲染组件。

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
ReactDOM.render(<Hello />,document.getElementById('root'))

三、是React事件绑定，这里用几个个小例子来解释（onClick事件、合成事件）：

例1（onClick事件）

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

class App extends React.Component{
handleClick(){
alert('点击成功')
}

render(){
return(
<button onClick={this.handleClick}>点击</button>)}}

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

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

function App(){

function handleClick(){
alert('点击成功')
}

return(
<button onClick={handleClick}>点击</button>)}

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

例2（合成事件）

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

class App extends React.Component{
handleClick(e){
//阻止浏览器的默认行为
e.preventDefault();
console.log('a标签单击事件已经触发了哈')
}

render(){
return(
<a href='https://juejin.cn/' onClick={this.handleClick}><button>稀土掘金</button></a>
)}}

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

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

函数组件=无状态组件（静态）
类组件=有状态组件（动态）

五、state&&setState（） state组件的私有数据，只能在组件内部使用。

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

class App extends React.Component{
constructor(){
super()
this.state={
count:0
}
}

// state={
// count:0
// }

render(){
return(
<div style={{textAlign:'center'}}>
<h2>count: {this.state.count}</h2>
<button onClick={this.handleClick}>+1</button>
</div>
)}}
ReactDOM.render(<App/>,document.getElementById('root'))

setState修改数据

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

class App extends React.Component{
constructor(){
super()
this.state={
count:0,
}
}
// state={
// count:0
// }
render(){
return(
<div style={{textAlign:'center'}}>
<h2>count: {this.state.count}</h2>
<button onClick={()=>this.setState(
{count:this.state.count+1}
)}>+1</button>
</div>
)}}

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

六、this指向问题
1.箭头函数 利用箭头函数自身不绑定this特点

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

class App extends React.Component{
state={
count:0
}

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

render(){
return(
<div style={{textAlign:'center'}}>
<h2>count: {this.state.count}</h2>
<button onClick={()=>this.handleClick()}>+1</button>
</div>
)}}

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

2.Function.prototype.bind()

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

class App extends React.Component{
state={
count:0
}
constructor(){
super()
this.handleClick=this.handleClick.bind(this)
}
handleClick(){
this.setState(
{count:this.state.count+1})
}

render(){
return(
<div style={{textAlign:'center'}}>
<h2>count: {this.state.count}</h2>
<button onClick={this.handleClick}>+1</button>
</div>)}}

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

3.class实例方法--利用箭头函数的class实例方法

class App extends React.Component{
state={
count:0
}

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

render(){
return(
<div style={{textAlign:'center'}}>
<h2>count: {this.state.count}</h2>
<button onClick={this.handleClick}>+1</button>
</div>
)}}

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

下一部分就是表单啦！