1. 定義組件
- 函數(shù)式定義（簡(jiǎn)單組件），使用function定義
import React from 'react';
import ReactDOM from 'react-dom/client';
function App() {
return (
<button onClick={handleClick}>click</button> // 直接把方法handleClick賦值給onClick
)
function handleClick() {
alert('click')
}
}
export default App; // 其他組件引用時(shí)需要export出去
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
- 類式定義（復(fù)雜組件），使用class定義
import React from 'react';
import ReactDOM from 'react-dom/client';
class App extends React.Component {
render() {
return (
<button onClick={this.handleClick}>click</button> // this代表在App的實(shí)例對(duì)象上賦值handleClick
)
}
handleClick() {
alert('click')
}
}
export default App; // 其他組件引用時(shí)需要export出去
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
2. state，設(shè)置組件初始值
- 原始定義，需要在constructor中定義state和綁定方法handleClick的this
class Weather extends React.Component {
// 創(chuàng)建構(gòu)造器，類似ruby的initialize
constructor(props) {
// 構(gòu)造器是否接收props，是否傳遞給super，取決于是否希望在構(gòu)造器中通過this訪問props
// 如果是 super()，則 console.log(this.props)為undefined， console.log(props)就是傳進(jìn)來的props
// 如果是 super(props)，則 console.log(this.props)為Weather的實(shí)例
super(props) // 調(diào)用父類React.Component的構(gòu)造器
this.state = { isHot: true, wind: 'big' }
this.handleClick = this.handleClick.bind(this) // 給handleClick綁定this
}
render() {
const isHot = this.state.isHot
return (
<h1 onClick={this.handleClick}>Today is very {isHot ? 'hot' : 'cold'}, wind: {this.state.wind}</h1>
)
}
handleClick() {
this.setState({ isHot: !this.state.isHot, wind: this.state.wind !== 'big' ? 'big' : 'small' })
}
}
- 簡(jiǎn)化后在類中直接給state和handleClick賦值，就直接把屬性和方法綁定到Weather的實(shí)例上了
class Weather extends React.Component {
// 初始化
state = { isHot: true, wind: 'big' }
// 渲染
render() {
const isHot = this.state.isHot
return (
<h1 onClick={this.handleClick}>Today is very {isHot ? 'hot' : 'cold'}, wind: {this.state.wind}</h1>
)
}
// 自定義方法
handleClick = () => {
this.setState({ isHot: !this.state.isHot, wind: this.state.wind !== 'big' ? 'big' : 'small' })
}
}
3. props，從組件外部給組件定義中傳值
- 函數(shù)式組件使用props
- 函數(shù)式組件使用props
```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import PropTypes from 'prop-types';
function Person(props){
const { name, age, sex } = props
return (
<ul>
<li>name: {name}</li>
<li>age: {age}</li>
<li>sex: {sex}</li>
</ul>
)
}
// 限制屬性
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string,
speak: PropTypes.func
}
// 設(shè)置屬性默認(rèn)值
Person.defaultProps = {
age: 18,
sex: 'female'
}
function speak() {
console.log('speak')
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const p = { name: 'Tom' }
root.render(
<React.StrictMode>
{/* <Person name={p.name} age={p.age} sex={p.sex} speak={speak} /> */}
<Person {...p} speak={speak} />
</React.StrictMode>
);
- 類式組件使用props
import React from 'react';
import ReactDOM from 'react-dom/client';
import PropTypes from 'prop-types';
class Person extends React.Component {
render() {
const { name, age, sex } = this.props
return (
<ul>
<li>name: {name}</li>
<li>age: {age}</li>
<li>sex: {sex}</li>
</ul>
)
}
state = { isHot: true } // 這是給組件實(shí)例對(duì)象賦值
// 限制屬性 前面加 static 是給組件類賦值
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string,
speak: PropTypes.func
}
// 設(shè)置屬性默認(rèn)值
static defaultProps = {
age: 18,
sex: 'female'
}
}
function speak() {
console.log('speak')
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const p = { name: 'Tom' }
root.render(
<React.StrictMode>
{/* <Person name={p.name} age={p.age} sex={p.sex} speak={speak} /> */}
<Person {...p} speak={speak} />
</React.StrictMode>
);
4. refs，獲取其他html元素的dom，相當(dāng)于$(‘#xx’)
- 字符串形式ref
class Demo extends React.Component {
render() {
return (
<>
<input ref="input1" type="text" />
<button onClick={this.tipLeftInput}>Click me</button>
<input ref="input2" onBlur={this.tiprightInput} type="text" />
</>
)
}
tipLeftInput = () => {
alert(this.refs.input1.value);
}
tiprightInput = () => {
alert(this.refs.input2.value);
}
}
- 回調(diào)形式ref
class Demo extends React.Component {
render() {
return (
<>
<input ref={(currentNode) => { this.input1 = currentNode }} type="text" />
{/* <input ref={currentNode => this.input1 = currentNode} type="text" /> 簡(jiǎn)寫 */}
<button onClick={this.tipLeftInput}>Click me</button>
<input ref={(currentNode) => { this.rightInput = currentNode }} onBlur={this.tiprightInput} type="text" />
</>
)
}
tipLeftInput = () => {
alert(this.input1.value);
}
tiprightInput = () => {
alert(this.rightInput.value);
}
}
- ref回調(diào)函，如果是內(nèi)聯(lián)函數(shù)方式定義的，在更新過程中（更改state重新渲染render）會(huì)被執(zhí)行兩次，第一次傳入?yún)?shù)null，第二次傳入?yún)?shù)為DOM， 可以將ref回調(diào)函數(shù)定義為class的綁定函數(shù)避免上述問題。
![[React]面向組件編程](https://imgs.yssmx.com/Uploads/2023/06/502324-1.png)
- createRef api創(chuàng)建ref ， 較麻煩
class Demo extends React.Component {
render() {
return (
<>
<input ref={this.myRef1} type="text" />
<button onClick={this.tipLeftInput}>Click me</button>
<input ref={this.myRef2} onBlur={this.tiprightInput} type="text" />
</>
)
}
myRef1 = React.createRef()
myRef2 = React.createRef()
tipLeftInput = () => {
console.log(this.myRef1.current.value);
}
tiprightInput = () => {
console.log(this.myRef2.current.value);
}
}
5. 事件處理
- button要獲取input的值，使用ref
class Demo extends React.Component {
render() {
return (
<>
<input ref={this.myRef1} type="text" />
<button onClick={this.tipLeftInput}>Click me</button>
</>
)
}
myRef1 = React.createRef()
tipLeftInput = () => {
console.log(this.myRef1.current.value);
}
}
- input獲取本身DOM的值，使用e.target獲取dom
class Demo extends React.Component {
render() {
return (
<>
<input onBlur={this.tiprightInput} type="text" />
</>
)
}
tiprightInput = (e) => {
console.log(e.target.value);
}
}
6. 非受控組件和受控組件
- 非受控組件，使用ref取值，不建議使用
class Login extends React.Component {
render() {
return (
<form onSubmit={this.submit}>
<input type="text" name="username" ref={ref => this.username = ref} />
<input type="text" name="password" ref={ref => this.password = ref} />
<input type="submit" name="" />
</form>
)
}
submit = (e) => {
e.preventDefault();
alert(`username: ${this.username.value}, password: ${this.password.value}`)
}
}
- 受控組件，使用state取值，建議使用
class Login extends React.Component {
state = {
username: '',
password: ''
}
render() {
return (
<form onSubmit={this.submit}>
<input type="text" name="username" onChange={this.saveUsername} />
<input type="text" name="password" onChange={this.savePassword} />
<input type="submit" name="" />
</form>
)
}
saveUsername = (e) => {
this.setState({ username: e.target.value })
}
savePassword = (e) => {
this.setState({ password: e.target.value })
}
submit = (e) => {
e.preventDefault();
alert(`username: ${this.state.username}, password: ${this.state.password}`)
}
}
7.高階函數(shù)
-上面的代碼重構(gòu)，onChange 調(diào)用的是saveFormdate方法return的返回值，是個(gè)函數(shù)
必須把一個(gè)函數(shù)交給onChange文章來源地址http://www.zghlxwxcb.cn/news/detail-502324.html
class Login extends React.Component {
state = {
username: '',
password: ''
}
render() {
return (
<form onSubmit={this.submit}>
<input type="text" name="username" onChange={this.saveFormdate('username')} />
<input type="text" name="password" onChange={this.saveFormdate('password')} />
<input type="submit" name="" />
</form>
)
}
saveFormdate = (params) => {
return (e) => {
this.setState({ [params]: e.target.value })
}
}
submit = (e) => {
e.preventDefault();
alert(`username: ${this.state.username}, password: ${this.state.password}`)
}
}
8. 生命周期，回調(diào)函數(shù)或者叫鉤子函數(shù)
- 16版本生命周期
![[React]面向組件編程](https://imgs.yssmx.com/Uploads/2023/06/502324-2.png)
class Life extends React.Component {
// 構(gòu)造器
constructor(props) {
console.log('constructor')
super(props)
this.state = { num: 0 }
}
// 組件掛載前調(diào)用
componentWillMount() {
console.log('componentWillMount')
}
// 詢問是否更新組件調(diào)用
shouldComponentUpdate() {
console.log('shouldComponentUpdate')
return true // 默認(rèn)返回true
}
// 組件更新前調(diào)用
componentWillUpdate() {
console.log('componentWillUpdate')
}
// 組件掛載，初始化渲染、狀態(tài)更新后調(diào)用
render() {
console.log('render')
return (
<>
<h1 style={{ opacity: this.state.opacity }}>當(dāng)前數(shù)字： {this.state.num}</h1>
<button onClick={this.add}>數(shù)字+1</button>
<button onClick={this.unmount}>卸載組件</button>
</>
)
}
// 組件更新后調(diào)用
componentDidUpdate() {
console.log('componentDidUpdate')
}
// 組件掛載后調(diào)用，調(diào)用一次
componentDidMount() {
console.log('componentDidMount')
}
// 組件卸載前調(diào)用
componentWillUnmount() {
console.log('componentWillUnmount')
}
// 數(shù)字+1調(diào)用
add = () => {
const { num } = this.state
this.setState({ num: num + 1 })
}
// 卸載組件調(diào)用
unmount = () => {
root.unmount();
}
}
9. 示例
- axios使用
import axios from 'axios'
axios({
method: 'post',
url: '/user/12345',
headers: { Token: 'xxxxx' },
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(
res => {}
err => {}
);
// 發(fā)起多個(gè)并發(fā)請(qǐng)求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
Promise.all([getUserAccount(), getUserPermissions()])
.then(function (results) {
const acct = results[0];
const perm = results[1];
});
- App.js
import React, { Component } from 'react';
import Search from './components/Search'
import List from './components/List'
import { nanoid } from 'nanoid' // nanoid()取uuid
import './App.css'
export default class App extends Component {
state = {
data: [],
isFirstSearch: true,
loading: false,
err_msg: ''
}
render() {
return (
<div className="App">
<Search updateApp={this.updateApp} /> // 父給子傳函數(shù)
<List {...this.state} loading=false />// 父給子傳數(shù)據(jù)
</div>
)
}
updateApp = (stateOjb) => {
this.setState(stateOjb)
}
}
- Search組件中的 index.jsx
import React, { Component } from 'react'
import axios from 'axios';
export default class Search extends Component {
render() {
return (
<div>
<input ref={r => this.input = r} type='text' /> // 設(shè)置ref
<button onClick={this.handleSearch}>Search</button>
</div>
)
}
handleSearch = () => {
this.props.updateApp({ isFirstSearch: false, loading: true })
axios({
url: `https://api.github.com/search/users?q=${this.input.value}`,
}).then(
res => {
this.props.updateApp({ loading: false, data: res.data.items })
},
err => {
this.props.updateApp({ loading: false, err_msg: err.message })
}
)
}
}
- List組件中的index.jsx
import React, { Component } from 'react'
import './index.css'
export default class List extends Component {
render() {
const { data, isFirstSearch, loading, err_msg } = this.props
return (
<div className='list'>
{
isFirstSearch ? 'input serach name' :
loading ? 'loading...' :
err_msg ? err_msg :
data.map(item => {
return (
<div key={item.id}>
<img src={item.avatar_url} style={{ width: '100px', height: '100px' }} alt='avatar' />
<p>{item.login}</p>
</div>
)
})
}
</div>
)
}
}
- onChange onClick等傳參數(shù)的話，用箭頭函數(shù)直接傳參
import React from 'react';
import './index.css'
export default class Item extends React.Component {
state = { mouse: false }
render() {
const { list } = this.props;
const { mouse } = this.state;
return (
<div className='item' style={{ background: mouse ? '#ddd' : '#fff' }} onMouseEnter={() => this.handleMounse(true)} onMouseLeave={() => this.handleMounse(false)}>
<label htmlFor={list.id}>
<input type="checkbox" onChange={(e) => this.onChange(e, list.id)} checked={list.isDone} name="" id={list.id} />
<span>{list.name}</span>
</label>
<button onClick={() => this.handleDelete(list.id)} style={{ display: mouse ? 'inline-block' : 'none' }} >刪除</button>
<input type="checkbox" onChange={this.handleCheckbox} checked={checked} name="" id="" />
// 傳參時(shí)候不用箭頭函數(shù)，則需要使用高階函數(shù)去接收參數(shù)
<input type="text" name="username" onChange={this.saveFormdate('username')} />
</div>
)
}
handleDelete = (id) => { // 傳id
if (window.confirm('確定刪除嗎?')) {
this.props.delTodo(id)
}
}
onChange = (e, id) => { // 傳event和id
this.props.updateTodo(id, e.target.checked)
}
handleMounse = (flag) => { // 傳參
this.setState({
mouse: flag
})
}
handleCheckbox = (e) => { //直接拿到event
this.props.allCheck(e.target.checked)
}
// 傳參時(shí)候不用箭頭函數(shù)，則需要使用高階函數(shù)去接收參數(shù)
saveFormdate = (params) => {
return (e) => {
this.setState({ [params]: e.target.value })
}
}
}
10. 使用消息訂閱傳遞數(shù)據(jù)， 適用于任意組件互傳數(shù)據(jù)
- 訂閱消息， 在
componentDidMount和componentWillUnmount訂閱和取消訂閱
import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'
export default class List extends Component {
state = {
data: [],
isFirstSearch: true,
loading: false,
err_msg: ''
}
componentDidMount() {
this.token = PubSub.subscribe('search', (msg, stateObj) => {
this.setState(stateObj)
})
}
componentWillUnmount(){
PubSub.unsubscribe(this.token)
}
render() {
const { data, isFirstSearch, loading, err_msg } = this.state
return (
<div className='list'>
{
isFirstSearch ? 'input serach name' :
loading ? 'loading...' :
err_msg ? err_msg :
data.map(item => {
return (
<div key={item.id}>
<img src={item.avatar_url} style={{ width: '100px', height: '100px' }} alt='avatar' />
<p>{item.login}</p>
</div>
)
})
}
</div>
)
}
}
- 發(fā)布消息
import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios';
export default class Search extends Component {
render() {
return (
<div>
<input ref={r => this.input = r} type='text' />
<button onClick={this.handleSearch}>Search</button>
</div>
)
}
handleSearch = () => {
PubSub.publish('search', { isFirstSearch: false, loading: true });
axios({
url: `https://api.github.com/search/users?q=${this.input.value}`,
}).then(
res => {
PubSub.publish('search', { loading: false, data: res.data.items});
},
err => {
PubSub.publish('search', { loading: false, data: err.message });
}
)
}
}
文章來源：http://www.zghlxwxcb.cn/news/detail-502324.html
到了這里，關(guān)于[React]面向組件編程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
