React Part1 总结

昨天学完了Jonas的React Part1 , 正好自己一直有想写博客的想法 ，于是来做一个总结

1.使用create-react-app创建一个react项目

在终端输入:npx create-react-app@版本号 项目名

2.渲染根组件，严格模式

src中需要有一个Index.js文件，因为项目中的模块捆绑工具Webpack要求入口为index.js

index.js中需导入两个模块 ： React 和 ReactDOM

在react中函数开头必须大写，如App , Logo

一般用一个App函数来囊括需要渲染的组件,App是根组件，负责组织页面结构

在React中，一个组件通常只能返回一个根元素

设置好之后，设置root

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

)

至此，App中的组件都会通过root渲染在网页中

(注 : 要在index.html中设置一个<div id="root"></div>)

3.组件树

react程序是由一个个组件构成的，组件之间也有父子关系

4.创建组件

将所有的组件包含在App中

这个就是嵌套组件，Header,Pizza,Footer都被嵌套在div组件中。在React中，一个组件通常只能返回一个根元素，所以如果去掉div会报错

在JSX中转换成js模式 : 用{} , 在{}内可使用数组，对象等等js的东西

一个组件由三部分组成 ： Data , Logic , Appearance

5.在JSX中使用CSS

两种办法

1.作为属性添加在组件中

2.外联css

在JSX中设置类名 ： className=""

5.props

可以理解为自定义属性，在 React 中，Props（Properties 的缩写）是组件间数据传递的核心机制

父组件 → 子组件传递数据（只读，子组件不能直接修改）

<UserCard /> 是子组件的使用方式，而非父组件。父组件是调用 <UserCard /> 的组件（如示例中的 ParentComponent）。

张三和28是数据，由父组件传给了子组件

图中解构了数据，因为props的形式为一个对象，function UserCard({name,age})相当于直接解构了这个对象

Prop 和 State区别

State是组件内部的数据，可以通过组件的logic被修改

props的数据来自父元素，所以相当于props的数据来自组件外部，props只能被父元素修改

6.渲染列表

将列表中的数据一项一项通过props传入组件中

以视频中的例子：

有一个pizzaData的数组，里面存了很多pizza的数据，我想要把这些数据一个个存进Pizza这个组件中，可以用到map , 因为map会创建一个新的数组而不改变原数组 , 这样会生成一个个<Pizza pizzaObj={pizza} />的组件

这里就体现了Props的传递

7.react fragment

之前提到，一个root只能对应一个组件，所以当我们想在一个组件中同时渲染很多组件时需要用一个容器把他们包起来

这里用到了一个空<> , 这个好处是<>里面的组件都是平等的且与<>在DOM 层面：无父子关系，而在 React 组件树层面：Fragment 仍是逻辑父节点 ， 而如果用<div>包裹的话它们则会和<div>形成父子组件关系

8.事件处理

直接在对应组件中绑定事件

如： <button onClick={()=>{}}>

注：绑定事件时不要调用函数，而是要指定函数值

两者区别

9.状态State

在 React 中，改变 props和state 会触发组件重新渲染

创建并改变一个状态 ：

1.使用useState函数

useState函数里面有两个东西，一个是状态变量，还有一个是用来改变状态的函数，状态变量只能被这个函数修改

可以直接解构useState

1为状态变量的默认值，函数的命名一般为set什么什么

2.在代码中使用状态变量

3.用setStep函数来修改状态变量，这个函数里面最好再来一个回调函数

要根据状态的当前值更新状态时，我们可以在useState函数中使用回调函数

useState和其他hooks只能在函数的顶层使用

顶层：在函数组件的最外层作用域，不能嵌套在条件语句、循环、嵌套函数或其他块级作用域中

要使用useState , 得先导入useState模块

10.表单

表单中的三个东西

1.input

属性：1.type，指定Input输入值的类型

2.placeholder : 占位符

3.required : 强制输入

4.disabled : 禁止输入

2.select和option

他俩组合能实现下拉菜单选择功能

显示文本和value属性的区别

这里我发现一个我容易错的点

这个写法是错的，注意波浪线的花括号，在js中，如果使用花括号，必须要有一个return , 我这里漏了

正确的写法有两种

第一种是手动把return()给加上了

第二种就是把return省略

11.受控元素

受控元素（Controlled Components） 是指表单元素（如 <input>、<textarea>、<select>）的值完全由 React 状态（state）控制的组件

1.用useState设置状态变量和函数

2.在指定组件中设置value为元素值

3.用onChange来更新状态

12.状态的使用原则