@zhujj_的博客

1-1、在项目中安装路由这里使用旧版本5：新版本是@61-2、一个项目使用一个路由器来管理路由即可在 index.jx 文件中，渲染App时，用 指定的路由器包裹 App 组件使用 BrowerRouter 或 HashRouter1-3、 路由组件和一般组件的区别一般组件：路由组件：一般组件：component。

如果直接使用 document.querySelecterAll 方法 + canvas 类名（这个canvas类名是自定义的，即函数displayPDF、resizePDF 中要传的参数 canvasClassName）的方式获取到所有的canvas，然后通过遍历的方式给他们分别设置属性 taransform scale 来实现放大或缩小的效果，会导致PDF变模糊而影响阅览体验。（8）所有页面渲染完成后执行的回调函数（这里设置回调函数有一个参数，为该pdf的总页数，用于展示pdf的总页数）；

需要父组件提前定义一个函数，然后该函数需要的参数就是子组件向父组件传的数据，函数体的内容可以是在父组件中处理该参数（子组件传过来的数据），也可以把数据传给其他的子组件实现兄弟组件之间的通信等。接收到 Children 组件中用户输入的数据，将该数据传给 Children_a。组件 InputArea ，用于提供用户输入环境，并实时发布消息，传递用户输入的完整内容作为消息的数据。订阅用户输入的消息，将用户输入的数据实时更新到面板中。子组件 Children_a 用于实时展示用户输入的内容。

注意：以下后三项请求的展示结果，在服务器中返回的数据都是一个数组的形式，如 car 数据返回的是 res.data = ['大众','奥迪','本田','北京','坦克','奔驰','沃尔沃']。将数组类型的数据放在JSX中的花括号中，会自动遍历数组中的内容，因此 carInfo 为若干个汽车品牌名称的拼接效果。先在 src 下创建一个 js 文件，并命名为 setupProxy.js。简单编写 JSX 文件和对应的 scss 文件，在 JSX 件中引入 scss 文件。1、安装并简单使用Scss。

先删除掉脚手架文件 public 目录和 src 目录下的全部内容（暂且留下 public 目录下的 favicon.ico 图标文件），重新开始创作。components 目录下又是若干个目录（有多少个组件，就应该有多少个这样的目录），在 src 目录下创建一个新的目录 components，专门用来存放组件。（注意，项目文件夹名称不能有中文或特殊字符，不要使用大小的英文字母）（1-1）创建项目脚手架（每次创建项目脚手架时需进行）进入到准备用来存放项目文件夹的目录下，（1-2）启动\运行项目。

1、旧 的生命周期函数（9个）1、旧 的生命周期函数（9个）初始化时调用的生命周期函数（初始化由 ReactDOM.render() 引发）就是类的构造器，最早执行的，一生只执行一次。将要挂载，一生只执行一次。旧名称为 componentWillMount ，已经废弃。在未来的某个新版本开始将不再支持旧名称的写法。render—— 将组件渲染到页面中，将执行至少一次。—— 组件挂载完毕后执行，常在该函数内做一些初始化的操作。

由于非受控组件会使用到 ref ，且可能会使用到很多次，所以多少会存在一些性能上的问题，在数据需要收集的时候，可以多考虑使用受控组件来完成。用户输入的数据或者是选择的操作实时被监视，并将值实时地更新到 state 中，在需要使用时，可以直接到 state 中获取，就是受控的；如果用户输入的数据或各种操作的结果在需要收集时是利用 ref 绑定了元素、通过 refs 的方式来获取的，那就是非受控组件；受控，大概可以理解为 “受监控”。以表单作为简单例子。3、数据双向绑定的简单实现。

但是在这里(组件标签中)，我们写的不是 js，而是 jsx ，{...cityObj} 这对花括号是 jsx 中书写表达式或变量的一个语法，我们真实书写的只是 ...cityObj ，并不是把一个拷贝出来的对象加在组件标签身上。在类的构造器中，让目标方法调用 bind() 方法，修改目标方法的 this 指向，并把返回的新函数赋给一个实例方法。的时候该函数会执行两次，第一次执行传递的参数是null，用户清空旧的 ref，然后再执行一次，这次传递的参数是当前的DOM结点，用于设置新的 ref。

若标签是小写字母开头，则jsx在将标签转化成html时，将该标签与html中的标签相对应转换；、一个虚拟dom，只能有一个根标签，如下方的p就属于只有一个根标签（即p）。、定义虚拟 dom 时，右边jsx标签内容不要用引号包裹，如需要换行则用圆括号将全部内容包起来写。、若要设置内联样式（style），要使用双花括号的格式，且外侧不需要用引号包裹（如上）。、若要添加类属性值，类属性的名称 class 变为 className（如上）。、若jsx中混入变量、js表达式等，则需要使用一对花括号包裹起来。