【新手】React编码笔记【备忘录】
首先
在投稿时，作者的水平大约是在从零基础开始学习了大约两个月左右。因此，可能存在理解不足、解释不足、错误的内容或称呼等问题。如果您偶然参考了这些内容，请在考虑到上述问题的基础上阅读。说明文中引用了ChatGPT教师的许多内容。
组件描述方法
以下全部都扮演着同样的角色。
// Class Component（クラスコンポーネント）
class App extends React.Component {
render() {
return(
<div>
<h1>Hello World</h1>
</div>
);
};
};
// Functional Component（関数コンポーネント）（ES5で書いた場合）
function App(props) {
return(
<div>
<h1>Hello World</h1>
</div>
);
};
// Functional Component（関数コンポーネント）（ES6（アロー関数）で書いた場合）
const App = (props) => {
return(
<div>
<h1>Hello World</h1>
</div>
);
};
// Functional Component（関数コンポーネント）（ES6（アロー関数）で書いた場合）
// 以下のように無駄な部分を削ぎ落として超シンプルに書くことも可能
const App = props => <div><h1>Hello World</h1></div>;
关于return语句
如果只有一行的话，没有return()也可以。
如果想要换行进行描述，必须使用（）来指定范围，否则会出现错误。
关于这个片段
在React中，组件内经常使用
，但是通过使用可以避免不必要的
元素。
const App = (props) => {
return(
<div>
<h1>Hello World</h1>
</div>
);
};
<div>
<h1>Hello World</h1>
</div>
const App = (props) => {
return(
<React.Fragment>
<h1>Hello World</h1>
</React.Fragment>
);
};
<h1>Hello World</h1>
const App = (props) => {
return(
<>
<h1>Hello World</h1>
</>
);
};
<h1>Hello World</h1>
关于道具。
props是指组件的参数
在父组件中通过<子组件 属性名={值} />的方式传递，子组件通过{props.属性名}的方式接收
不论是函数组件还是类组件，设置的props绝对不可以改变
记住props是只读的
props在组件之间传递时必要，state在组件内部传递数据时必要，记住这点可能会更方便。
关于州（state）
在React中，”State” 指的是根据用户的操作而变化的值。
// Class Component（クラスコンポーネント）
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name:'〇〇'}; //オブジェクトとして定義したものをthis.stateに代入
};
render() {
console.log(this.state); // {name:'○○'}というオブジェクトが表示される
console.log(this.state.name); // ○○が表示される(this.stateプロパティ名)
return(
// 省略
);
};
};
↑备忘录：如果有精力的话，请将函数组件的写法更改为（只需要一个选项）
描述父子组件
常规描述
<div id="root"></div>
// 最上位？（呼び名わからん）コンポーネント（index.jsx）
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Parent />
);
// 親コンポーネント（parent.jsx）
import React from "react";
import Child from './components/Child';
const Parent = () => {
return(
<div>
<Child
title = {'Hello World'}
/>
</div>
);
};
export default Parent;
// 子コンポーネント（components/child.jsx）
import React from "react";
const Child = (props) => {
return(
<div>
<h1>{props.title}</h1>
</div>
);
};
export default Child;
输出结果
Hello World
用分割代入的方式进行描述
为了更简洁地描述，可以使用解构赋值。
通过在{}中编写参数名称，可以接收传递的参数。
// 親コンポーネント（parent.jsx）
import React from "react";
import Child from './components/Child';
const Parent = () => {
return(
<div>
<Child
title = {'Hello World'}
/>
</div>
);
};
export default Parent;
// 子コンポーネント（components/child.js）
import React from "react";
const Child = ({title}) => {
return(
<div>
<h1>{title}</h1>
</div>
);
};
export default Child;
输出结果
Hello World
用分割赋值法写出多个参数。
// 親コンポーネント（parent.jsx）
import React from "react";
import Child from './components/Child';
const Parent = () => {
return(
<div>
<Child
title = {'Hello'}
text = {'World'}
message = {'thanks'}
/>
</div>
);
};
export default Parent;
// 子コンポーネント（components/child.js）
import React from "react";
const Child = ({title, text, message}) => {
return(
<div>
<h1>{title}</h1>
<p>{text}</p>
<p>{message}</p>
</div>
);
};
export default Child;
输出结果
Hello
World
thanks
在子组件中指定初始值的方法
在父组件中可以省略参数，并且如果不指定，默认会使用这里的初始值。
请用中文将以下内容重新表达一遍，只需要一种说法：
例1
// 親コンポーネント（parent.jsx）
import React from "react";
import Child from './components/Child';
const Parent = () => {
return(
<div>
<Child
/>
</div>
);
};
export default Parent;
// 子コンポーネント（components/child.js）
import React from "react";
const Child = ({title = 'Hello', text = 'World', message = 'thanks'}) => {
return(
<div>
<h1>{title}</h1>
<p>{text}</p>
<p>{message}</p>
</div>
);
};
export default Child;
输出结果 (shū chū jié guǒ)
Hello
World
thanks
例如二
// 親コンポーネント（parent.jsx）
import React from "react";
import Child from './components/child';
const Parent = () => {
return(
<div>
<Child
title = {'Hello'}
text = {'World'}
/>
</div>
);
};
export default Parent;
// 子コンポーネント（components/child.js）
import React from "react";
const Child = ({title, text, message = 'thanks'}) => {
return(
<div>
<h1>{title}</h1>
<p>{text}</p>
<p>{message}</p>
</div>
);
};
export default Child;
输出结果
Hello
World
thanks
由于在父组件中没有将props中的message传递给子组件，但是由于子组件中已经输入了message的初始值，所以会显示”thanks”。
第三个例子
// 親コンポーネント（parent.jsx）
import React from "react";
import Child from './components/child';
const Parent = () => {
return(
<div>
<Child
title = {'Hello'}
text = {'World'}
message = {'thanks'}
/>
</div>
);
};
export default Parent;
// 子コンポーネント（components/child.js）
import React from "react";
const Child = ({title = 'こんにちは', text = 'ようこそ', message = 'ありがとう'}) => {
return(
<div>
<h1>{title}</h1>
<p>{text}</p>
<p>{message}</p>
</div>
);
};
export default Child;
输出结果
Hello
World
thanks
子组件中已经有初始值的描述，但是会被父组件的描述覆盖。
第四个例子
// 親コンポーネント（parent.jsx）
import React from "react";
import Child from './components/child';
const Parent = () => {
return(
<div>
<Child
title = {'Hello'}
text = {'World'}
/>
</div>
);
};
export default Parent;
// 子コンポーネント（components/child.js）
import React from "react";
const Child = ({title = 'こんにちは', text = 'ようこそ', message = 'ありがとう'}) => {
return(
<div>
<h1>{title}</h1>
<p>{text}</p>
<p>{message}</p>
</div>
);
};
export default Child;
输出结果
Hello
World
ありがとう
这是过去的综合模式。
反应钩子
Hook是React 16.8版本中新增加的功能。Hook可以在函数组件中使用，可以让您无需编写类也能使用像状态等功能。
ReactDOM.render(
<App />,
document.getElementById("app")
);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<App />
);
这两种代码是用于渲染React组件的不同方法。
第一段代码使用ReactDOM.render()方法，将React组件渲染到指定的HTML元素中。具体来说，它将App组件渲染到id为”app”的HTML元素中。
第二段代码使用ReactDOM.createRoot()方法创建了一个React根对象，并在根对象中渲染组件。具体来说，它将App组件渲染到id为”root”的HTML元素中。
在React 18及更高版本中，推荐使用ReactDOM.createRoot()方法将整个应用程序包装在Root中。通过将应用程序包装在Root中，可以启用React的异步渲染功能（并发模式）。也就是说，通过异步渲染，可以改善UI的性能。
另一方面，ReactDOM.render()方法是在较旧版本的React中使用的方法，不支持异步渲染。
因此，通过使用ReactDOM.createRoot()方法将整个应用程序包装在Root中，可以实现更快速、响应更好的UI。
使用 useState
useState是Hook的一种功能。
“useState”是函数组件中用于管理状态的钩子。
它是函数组件中经常使用的钩子。
状态是组件内部保持的”状态”。
通过使用useState，可以在组件中管理”状态”。
它类似于变量，用于在需要时保存数据。
Props是不可更改的，但是可以后续更改状态。
只需要一个选项。
Q
import React from “react”;はReact 16以前は必要、React 17以降は必要なし、コンパイラが自動でインポートしてくれるようになった。
import React from “react”;はReact 17以降は必要ないという説明があったけど記述消すと上手くいきません、なぜでしょうか？React18.2.0を使用しています。
A（ChatGPT）
import React from ‘react’を削除すると、Reactコンポーネントを作成する際に必要なReactオブジェクトへのアクセスができなくなるため、エラーが発生します。React 17以降、Reactオブジェクトへのアクセスが自動的に追加されるようになりましたが、それでもReactオブジェクトを明示的にインポートする必要がある場合があります。したがって、import React from ‘react’を削除することは推奨されません。
React18.2.0を使用している場合でも、Reactオブジェクトをインポートする必要があるため、import React from ‘react’が必要になります。このインポートステートメントを省略すると、Reactコンポーネントがレンダリングされなくなり、エラーが発生します。
其他
以下是三个相当于if条件的运算符（表达式）：
如果hoge为真，则为”OPEN”，如果为假，则为”CLOSE”。
在中文中，如果要重新表达这句话，可以说：使用&&符号书写时。
只有当hoge为真时才显示。
&&以下只在为真时才显示。
如果需要使用Null合并运算符
{hoge === ‘A’ && ‘B’} 的中文翻译如下：
当 hoge 等于 ‘A’ 并且 ‘B’ 时，如果值不是 null 或 undefined，则返回 A；如果值是 null 或 undefined，则返回 B。
例如，如果数组中存在空字符串，通过 filter 方法进行处理可能会导致错误。
为了防止此类错误，在 null 或 undefined 的情况下，使用 Null 合体演算子可以定义空字符串等。
请提供相关链接。
【React】以初学者为目标的解析基本组件和使用方法！React Hooks入门
