学习笔记

进入网页点击组件就可以看到网页需要的各种配件，如按钮、导航栏等等，并且配有各种使用方法的API，目前已经更新到4.22版本，原本是只支持react不过后来也支持vue了。antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。antd还可以更改主题颜色，按需引入组件的css，不过得小小操作一下，以后需要了再来补。进入组件选一个比较好看的组件，比如我觉得这个导航栏不错。然后选择js的代码，copy到App组件就行了。终于，ul设置一下就可以了。

props：消息订阅-发布：pubs-sub、event等等集中式管理：redux、dva等等conText:生产者-消费者模式。

react-readux是官方为我们提供帮助react更方便使用redex的。下面将通过一个案例来展示react-redux的用法。实现这么一个界面，两组件之间能够通过redux信息交互。person组件生成action的函数。Person组件的UI组件和容器组件。count组件生成action的函数。Count的UI组件和容器组件。表示在这个文件夹开个服务器。person的“执行者”速度取决于项目的复杂程度。conut的“执行者”store（核心枢纽）这是实例打包后的文件。可以安装一个方便的包。...

redux是专门用于状态管理的库，能够使组件的多个状态进行共享，适合复杂状态交互的情景。用这么一个求和案例来感受redux的使用。专门生成对应action。可以实现对应按钮的功能。

此案例src的目录，在上个案例的基础上增加了Detail组件，能够接收到参数。使用实例来感受，本实例继承上一个案例。

this.props}则是将传来的参数全都展开，activeClassName属性用于当此组件被点击会被赋予特定样式，to是跳转的路由，此组件中的chilren属性就是组件中展现的文字。Home组件中还有两个按钮分别是News和Message，点击按钮需要展示对应的子组件，这里可以配置多级路由，前提是子路由需要前一级和父路由匹配。点击Show按钮，展示对应Show组件，值得注意这里Show按钮to中的路由多了一截，因为是模糊匹配，因此当匹配到show时就可以认为匹配成功。Home组件中展示的News组件。.

使用React搭建前端，使用axios向GitHub发送搜索用户名的请求并返回数据，然后展示相关用户名的头像等数据。数据传输通过App中定义数据，传给Search修改返回App，然后App再传给List展现。App是一个大的组件，里面包含两种（Search和List）组件。使用axios向GitHub发送请求并返回数据。如果没有axios需要npm安装一下axios。点击头像能够跳转到对应作者仓库的页面。使用三目运算判断逻辑结构。

设置两个按钮，点击第一个获取学生数据，点击第二个获取汽车数据，值得注意的是这两个数据源在不同的服务器中。分别配置不同的代理（b站尚硅谷视频里那种运行不出来，版本更新了，下面这种目前可以跑出来）服务器2的内容，包含汽车的数据。服务器1的代码包含学生数据。

node_modules存放脚手架所需要的依赖包public一般用来存放全局的静态文件src则是存放js等文件的地方默认生成的文件如上有很多但是目前对我来说其实不太需要只用就足以启动一个网页了favicon.ico为图标，其实不要也可以，只不过控制太报错不太看就加上

所有还是需要将key设置为唯一标识，不能简单用index，因为可能到时候会出现bug。

人一生有不同的阶段，React组件就好比人的一生，有不同的阶段，不同的阶段可以干不同的事。组件从创建到死亡会经历一些特定的阶段React组件中包含一系列钩子函数，会在特定的时刻调用我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作一段文字内容一直渐变，按下按钮所有内容消失运行结果：字会渐变，按下按钮内容会消失显示数字，点击按钮便加上1运行结果这样一些生命周期方法的运行顺序就一目了然了。关于使用父组件render按一下按钮组件的内容改变，也可看感受到组件生命周期其中比较重要的

（1）通过onxxx属性指定事件处理函数（注意大小写）a. React使用的是自定义事件，而不是使用原生的DOM事件，为了更好地兼容性b. React中的事件是通过事件委托方式处理的（委托给组件最外层的元素），为了高效（2）通过event.target得到发生事件的DOM元素对象，不要过度使用ref做一个账号、密码输入，点击按钮获取输入弹窗显示非受控组件，输入什么就是什么，不会被记录运行结果：能够记录输入的信息。高阶函数：若函数接受的参数是一个函数或者返回的值为一个函数则此函数称为高阶函数。函

/ React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点。组件内的标签可以定义属性来标识定义自己，有三种方式来进行定义。做两个输入框，左边点击按钮有弹窗，右边输出后点击别处页面会有弹窗。这种形式十分方便，操作起来速度快，但是react不推荐。//内联函数的写法和类绑定函数的写法没什么区别的。//内联函数的写法和类绑定函数的写法没什么区别的。"点击按钮提示数据""失去焦点提示数据""点击按钮提示数据""失去焦点提示数据""点击按钮提示数据""失去焦点提示数据"...

为了防止react太笨重，就将限制类型的模块单独抽了出来，方便选择是否使用，需要使用导入即可。通过标签属性从组件外向组件内传递变化的数据，组件内不能够修改props数据。每个组件对象都会有props(properties的简写)属性。做一个能够展示姓名、学号、性别的列表组件，并且能够设置默认值。会警告数据类型错误，达到限制数据类型的提示。组件标签的所有属性都保存在props中。//对标签属性进行类型、必要性的限制。//限制name必传，且为字符串。//props只读不能改。//指定模标签属性值。...

/类中的方法默认开启了局部严格模式，所以changeWeather中的this为undefined。//由于changeWeather是在onClick的回调，所以不是通过实例调用的，式直接调用。//react发现组件是类，则new出该类的实例，并通过该实例调用到原型上的render方法。//react发现组件是类，则new出该类的实例，并通过该实例调用到原型上的render方法。组件中的render方法中的this为组件实例对象。//状态不可直接更改，下面为直接更改。//更新，而不是替换。...

组件：用来实现局部功能效果的代码和资源的集合，因为一个界面的功能更加复杂，能够复用编码，简化项目编码，提高运行效率。模块，向外提供特定功能的js程序，一般就是一个js文件，能够使得复用js，简化js的编写，提高js运行效率。//react发现组件是类，则new出该类的实例，并通过该实例调用到原型上的render方法。//this为undefined因为开启了严格模式。顾名思义，使用函数的方式来定义组件。//首字母大写，自闭合。...

JSX全称JavaScript XML是react定义的一种类似于XML的JS的扩展语法，本质是React.creatElement(component, props, …2)若大写字母开头，react则去渲染对应的组件，若组件没有定义，则报错。4.内联样式，要用style={{key:value}}的形式去写。1)若小写字母开头，则将标签改为html中同名元素。2)若大写字母开头，react则去渲染对应的组件，若组件没有定义，则报错。4.内联样式，要用style={{key:value}}的形式去写。..

稍微学学前端开发，因为看一些兼职还是开发的活比较多，为了以后多条路子走，就浅学一下React吧。