react入门记录：关于react的一些注意点

1.组件名的首字母必须为大写字母：

否则无法正常渲染，控制台报错

2.不能为一个标签定义多个class属性，否则只有最后一个属性值会生效。

实际结果：

可以通过下面的方式添加多个class值：注意class1后面有个空格

3.标签中的style值不能为字符串，必须为对象

结果：浏览器报错

可以使用下面两种方式定义style的内容

4.组件中标签绑定state、props的值或者类组件中其他方法，需要使用this. 来调用，且要用{}括起来

注意虽然这里再在render中传入了一个props但是并没有用到，真正父组件传入的props是通过this.props调用的

5.调用方法时需要传入参数的方法

（注如果只需要事件对象不需要传入其他参数，则直接使用this.方法名即可）

6.render方法中使用到的state中的数据改变（setState)就会重新触发render方法

每秒钟打印一次执行了render方法

7.react中阻止默认事件：不能通过return false是实现需要使用e.prventDefault()

8.父子组件construtor、render、部分生命周期函数执行顺序：

注意：只要调用了setState方法不管有没有改变state数据，或者改变的数据是否在render方法中用到，都会执行render方法和componentDidUpdate钩子函数

9.插槽的使用：

通过在组件中放入需要插入的元素
在组件中通过props.children来获取插槽内容，如果值只插入了一个元素（跟元素），则props.children为一个对象，如果插入了多个元素，则为数组对象![在这里插入图片描述](https://img-blog.csdnimg.cn/20201227121422958.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdsaXUwO

10.路由的使用：

1.安装react-router-dom:npm install react-router-dom --save
2.在文件中按需引入：

import { BrowserRouter as Router,Link,Route,Switch } from "react-router-dom";

3.使用：
3.1 通过Link标签实现路由的切换
当Link标签的to属性值为字符串时则代表pathname的值，如果匹配到的是一个动态路由，如下，那么在路由/profile2/123对应的组件profile2中可以通过props.match.params.id来获取到传入的id值123.
当Link的to属性值为一个对象时，通过pathname来定义路由路径，serach的值会以?key=value的形式展示在url中，所有带入的参数都可以在路由对应组件的props.location中获取到

进入路由后props值的打印：

3.2 通过js的方法实现路由切换：

4.路由传参的3种方式：params，search,state,
在刷新页面后这三种方式传入的参数都会继续保留

11.redux的使用注意点：

1.由于在组件触发store中的方法前，会先执行一次reducer方法，所以需要在reducer方法中加上一个判断：

第一次打印结果：

2.使用react-redux时，如果通过事件改变了state的数据但是组件并没有进行相应的渲染，试试将reducer中的return state改成return {…state}