学习React第二天

JSX中实现列表渲染

map循环哪个结构就return那个结构

注意事项：加上一个独一无二的key 字符串或者是number都可以

key的作用：React框架内部使用，提升更新性能的

JSX中实现条件渲染

语法：在React中，可以通过逻辑与&&和三元表达式（？：）来实现基础条件的渲染

如果要控制一个元素的显示和隐藏，使用逻辑与比较合适，

如果控制两个元素的显示和隐藏，使用三元表达式更合适。

JSX中实现多条件复杂渲染

需求：列表中需要根据文章状态适配三种情况，单图，三图，和无图三种模式

解决方案：自定义函数 + if判断语句

React中的事件绑定

语法：on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

使用事件对象参数

语法：在事件回调函数中设置形参e（不一定非要叫e，什么名字都行）

传递自定义参数

语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler事件处理业务函数的时候传递实参

注意：不能直接写函数调用，这里事件绑定需要一个函数引用

同时传递事件对象和自定义参数

语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序必须要一致

学习组件

组件是什么

概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以相互嵌套，也可以复用多次。

组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用。

React组件

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可

useState基础使用

useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。

本质：和普通JS变量不同的是，状态变量一旦发生组件的UI视图也会跟着发生变化（数据驱动视图）

const [count,setCount]=useState(0)

1.useState是一个函数，返回值是一个数组

2.数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量

3.useState的参数将作为count的初始值（默认值）

用useState实现一个计数器

修改状态的规则

状态不可变

在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图的更新

修改对象状态

规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改。

组建的样式处理

组件基础样式方案

React组件基础的样式控制有两种方式

1.行内样式（不推荐）

2.class类名控制