React 框架的核心概念:状态、引用和属性
React 是一个流行的 JavaScript 前端框架,被广泛用于构建交互式的用户界面。在 React 中,有三个核心概念至关重要:状态(State)、引用(Ref)和属性(Props)。本文将介绍这三个概念的含义、用法和相互关系,帮助你更好地理解和使用 React 框架。
状态(State)
状态是 React 组件中存储和管理数据的机制。状态是可变的,可以在组件生命周期内被修改。React 组件可以通过 useState
钩子函数或类组件的 state
属性来定义和管理状态。
使用 useState
钩子函数定义状态
在函数组件中,可以使用 useState
钩子函数来定义和更新状态。
import React, { useState } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
在上面的示例中,我们使用 useState
钩子函数定义了一个名为 count
的状态变量,并使用 setCount
函数来更新它。当按钮被点击时,调用 increment
函数,通过 setCount
更新 count
的值。
在类组件中使用 state
属性定义状态
在类组件中,可以使用 state
属性来定义和更新状态。
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.increment()}>Increment</button>
</div>
);
}
}
在上面的示例中,我们在类组件的构造函数中使用 this.state
初始化了一个名为 count
的状态变量,并在 increment
方法中使用 this.setState
更新它。当按钮被点击时,调用 increment
方法,通过 this.setState
更新 count
的值。
状态的更新会触发组件的重新渲染,使界面反映最新的状态值。
总结:
状态(State):
- 状态是组件中存储和管理数据的机制。
- 可以使用
useState
钩子函数或类组件的state
属性定义和管理状态。 - 状态是可变的,在组件生命周期内可以修改。
- 状态的更新会触发组件的重新渲染,使界面反映最新的状态值。
引用(Ref)
引用是 React 提供的一种机制,用于在组件之间保存和访问 DOM 元素或其他值。引用提供了对底层 DOM 元素或组件实例的直接访问。在 React 中,可以使用 useRef
钩子函数或 React.createRef
方法来创建和使用引用。
使用 useRef
钩子函数创建引用
在函数组件中,可以使用 useRef
钩子函数来创建引用。
import React, { useRef } from 'react';
const MyComponent = () => {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={focusInput}>Focus Input</button>
</div>
);
};
在上面的示例中,我们使用 useRef
钩子函数创建了一个名为 inputRef
的引用,并将它赋值给输入框的 ref
属性。当按钮被点击时,调用 focusInput
方法,通过 inputRef.current
引用访问底层的输入框元素,并调用其 focus()
方法。
使用字符串方式创建引用
在类组件中,可以使用字符串方式来创建引用。
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
<input type="text" ref="myref" />
<button onClick={()=>{
console.log(this.refs.myref.value)
}}>点击</button>
</div>
)
}
}
使用 React.createRef
方法创建引用
在类组件中,可以使用 React.createRef
方法来创建引用。
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
focusInput() {
this.inputRef.current.focus();
}
render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={() => this.focusInput()}>Focus Input</button>
</div>
);
}
}
在上面的示例中,我们在类组件的构造函数中使用 React.createRef
方法创建了一个名为 inputRef
的引用,并将它赋值给输入框的 ref
属性。当按钮被点击时,调用 focusInput
方法,通过 this.inputRef.current
引用访问底层的输入框元素,并调用其 focus()
方法。
引用可以用于获取、修改或调用底层元素或组件的方法和属性。
使用回调函数方法来创建引用
在class类组件中使用回调函数的方法来创建引用
import React, { Component } from 'react'
export default class App extends Component {
showData(){
const {input1}=this;
console.log(input1.value)
}
render() {
return (
<div>
<input type="text" ref={(c) => { this.input1=c }} onBlur={() => { this.showData()}}/>
</div>
)
}
}
总结:
引用(Ref):
- 引用提供了对底层 DOM 元素或组件实例的直接访问。
- 引用可以用于获取、修改或调用底层元素或组件的方法和属性。
属性(Props)
属性是 React 组件接收和传递数据的机制。组件可以通过属性来接收来自父组件的数据,并根据属性的值来渲染不同的内容。在 React 中,属性是不可变的,只能从父组件传递给子组件,不能在组件内部直接修改。
传递属性给子组件
可以在使用类组件的地方通过属性传递数据给子组件。
在父组件中
//引I入刚刚定义的App组件
import App from "./reactx/07props"
//使用App组件
ReactDOM.render(<App name="张三" age="18> </App>.document.getElementByld("root")
在子组件中
import React, { Component ] from 'react'
export default class App extends Component{
render(){
//this.props接收父组件传来的值
const {name,age}=this.props
return (
<div>
<div>姓名:{name}</div>
<div>年龄:{lage}</div>
</div>
)
}
}
在上面的示例中, 父组件通过属性将名为 name,age
的值传递给子组件。在子组件中,通过 this.props参数可以访问父组件传递的属性值。
传递属性给父组件
可以在使用类组件的地方通过属性传递数据给父组件。
在子组件中
import React, { Component } from 'react'
export default class Son extends Component {
constructor(props){ //constructor构造函数中使用bind方法将funOne方法绑定到当前组件实例。
super(props);
this.funOne=this.funOne.bind(this) // 将funOne方法绑定到当前组件实例
}
funOne(){
const num = 123
this.props.onClick(num) // 调用父组件传递的onClick方法,并传递num参数
}
render() {
return (
<div>
<button onClick={this.funOne}>点击父组件打印123</button>
</div>
)
}
}
在父组件中
import React, { Component } from 'react'
import Son from "./son"
export default class Father extends Component {
//处理子组件传递的值的方法
funTwo(num){
console.log(num)
}
render() {
return (
<div>
<Son onClick={this.funTwo} ></Son>
</div>
)
}
}
在上面的实例中,在子组件中通过将一个事件放到组件实例中将数据传给父组件,在父组件中通过事件的形参来获取。
总结:
属性(Props):
- 属性是组件接收和传递数据的机制。
- 父组件可以通过属性将数据传递给子组件。
- 属性是不可变的,只能从父组件传递给子组件,不能在组件内部直接修改。
- 子组件通过
props
参数访问父组件传递的属性值。