React 框架的核心概念：状态、引用和属性

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 参数访问父组件传递的属性值。

这些核心概念相互关联，共同构成了 React 框架的基础。状态管理和数据传递通过属性和状态的机制实现，而引用提供了对底层元素和组件实例的访问能力。深入理解和熟练运用这些概念将有助于开发高效、可维护的 React 应用程序。