组件的属性和状态

Props和State是组件的数据管理方法，用于在组件之间传递数据等。
简要说明如下：
State：在组件内部管理的私有值。
Props：传递给另一个组件的全局值。

道具

Props是用于在父组件和子组件之间传递数据的对象。通过在父组件中为子组件设置属性，可以将值作为props传递给子组件。

Props的使用方法

父组件

const ParentComponent = () => {
	const name = 'John';
	
	return (
		<div>
			<ChildComponent name={name} age={30} message="Hello"/>
		</div>
	);
}

通过指定子组件的属性值作为父组件所使用的属性来传递数据。
属性名可以自由命名，如果要传递的值是变量或者数字，需要用花括号{}包裹，如果是字符串则需要用双引号””包裹。

子组件 (zǐ

const ChildConponent = (props) => {
	return(
		<div>
			<p>Name: {props.name}</p>
			<p>Age: {props.age}</p>
			<p>Message: {props.message}</p>
		</div>
	);
}

子组件接受一个作为参数的props对象，并接收来自父组件指定的属性。

使用props传递数据时，数据是单向的。也就是说，虽然可以从父组件向子组件传递数据，但不能直接从子组件向父组件传递数据。

陈述

State指的是用于管理组件状态的数据。通过使用State，可以根据用户的操作或来自外部的数据变化，动态地改变组件的显示。与props不同的是，State允许在赋值后进行修改，而props的赋值后则不可改变。

在 State 的特性中，State 被更新时会自动进行再渲染。这是因为更新 State 会触发调用重新渲染的方法。因为在使用类组件和函数组件时，State 有不同的用法，所以对它们分别进行解释。

State的使用方式

类组件

class TextInput extends React.Component {
	//初期化
	constructor(props){
		super(props);
		this.state = {
			text: 'hello'
		};
	}

	handleChange(event) {
		this.setState({ text: event.target.value });
	}	

	render(){
		return(
			<div>
				<input 
						type="text" 
						value={this.state.text}
						onChange={(event) => this.handleChange(event)}
				/>
				<p>入力されたテキスト：{this.state.text}</p>
			</div>
		);
	}
}

2. 设定组件的初始状态
→ 当组件首次渲染时，在 constructor 方法中初始化 this.state。

２．更新State：
调用this.handleChange，通过this.setState方法来更新state。
当onChange（即输入字段的值发生变化时），会调用handleChange。

函数组件

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('Hello');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={handleChange}
      />
      <p>入力されたテキスト: {text}</p>
    </div>
  );
}

在函数组件中，通过使用 Hooks（钩子），来进行状态的管理和更新。

• const [text, setText] = useState(‘Hello’)

• useStateフックを使用して，初期値がHelloのtextというstate変数と，そのstate変数を更新するための関数setTextを宣言する．

• handleChange

handleChange関数は入力フォームが変更されたときに呼び出される関数で，その中では，state変数を変更する処理を行っている．useStateで宣言したstate変数を変更する関数を利用することで，一緒に宣言したstate変数の値を変更する．

关于钩子函数的内容，我已经整理在另一篇文章中了。