React 知识总结

React项目

技术栈：react + react-router+mobx+webpack

1、需求：
Antd ant design 基于react实现，后台管理较方便。
Axios 异步请求
React 开发的主框架。
React-router-dom 路由
Mobx 状态管理库
Mobx-react mobx-react-devtools mobx和react结合的模块。

2、配置：
babel配置 .babelrc（Babel转译的配置文件）
webpack配置
在package.json 文件中设置Proxy进行代理（解决跨域请求的问题）
"proxy": {
"/api/RoomApi": {
"target": "http://open.douyucdn.cn"
}
}

3、组件状态state：
每一个react组件都有一个状态变量state，是一个JavaScript对象，为期定义属性保存值。
状态变化了，会出发UI重新渲染，使用setstate方法重新修改state的值。
State是组件内部使用的，是私有属性。

注意：
不允许对更新中的state进行setState
使用延时函数：setTimeout（里面是一个函数）
eg：setTimeout(()=>this.setState({p1:'www.abdd'}),5000)

4、HTML DOM的Javascript事件

Onabort 图像的加载被中断时触发
Onblur 元素失去焦点时触发
Onchange 域的内容被改变时触发
Onclick 当用户点击某个对象时候调用的时间句柄时触发
Ondbclick 当用户双击某个对象时候调用的事件句柄时触发
Onerror 在加载文档或图像时候发生错误时触发
Onfocus 元素获得焦点时触发
Onkeydown 某个键盘键被按下时触发
Onkeypress 某个键盘按键被按下并松开时触发
Onkeyup 某个按键被松开时触发
Onload 一张页面或一幅图像完成加载时触发
Onmousedown 鼠标按钮被按下时触发时触发
Onmousemove 鼠标按键被移动时触发
Onmouseout 鼠标从某元素移开时触发
Onmouseover 鼠标移到某个元素之上时触发
Onmouseup 鼠标按键被松开时触发
Onreset 重置按钮被点击时触发
Onresize 窗口或框架被重新调整大小时触发
Onselect 文本被选中时触发
Onsubmit 确认按钮被点击时触发
Onunload 用户退出页面时触发

React的事件注意：
使用小驼峰命名
使用jsx表达式，表达式中要指定事件处理函数。
不能使用return false，如果要阻止事件默认行为，使用event.preventDefault()
Id不能有重复的

5、props的应用
组件之间利用state或者传parent传递参数
修改属性是不可以的，因为是只读的this.props.name

6、构造器
constructor(props) constructor构造器是最早执行的函数，触发更新生命周期的函数，需要更新state或者props。
Super()调用父类的。
只要extends的，必须利用super()调用。Props作为参数传入

7、组件的生命周期与方法
组件的声明周期可分为三个状态。
Mounting：已插入真实dom。
Updating：正在被重新渲染。
Unmounting：已移除真实dom。

方法：
（1）装载组件触发：
Componentwillmount：在渲染前调用，在客户端也在服务器端，指挥在装载前调用一次。
Componentdidmount：在第一次渲染后调用，只要是在客户端，之后的组件已经生成对应的dom结构，可以通过this.getdomnode()来进行访问， 想与其他的Javascript框架一起使用，在这个方法中调用setTimeout，setinterval或者发送ajax请求等操作，只是在装载完后调用一次，在render之后。

（2）更新组件触发，这些方法不会再首次render组件的周期调用。
Componentwillreceiveprops（nextprops）：在组件接受到一个新的prop时候被调用，在初始化render时候不会调用。
Shouldcomponentupdae（nextprops，nextstate）：返回布尔值，在组件接受到新的Props或者state时候被调用，在初始化或者使用forceupdate：时候不被调用。(如果设置为false，就不允许更新组件。)
Componentwillupdate（nextprops，nextstate）：在组件接受到新的props或者state还没render时候被调用，在初始化不会调用。
Componentdidupdate（prevprops，prevstate）：在组件完成后更新后立即调用，在初始化时候不会被调用。

（3）卸载组件触发
ComponentwillUNmount：在组件从dom中移除的时候立即被调用

顺序是constructor =》 componentwillmount =》 render =》 componentdidmount –state或props改变，render。

8、装饰器
@wrapper
在类的前面调用

9、jsx规范
-标签中首字母小写就是HTML标记，首字母大写就是组件。
-要求严格的标记，要求所有标签必须闭合，br也应该写成<br />,/前面留一个空格。
-单行省略小括号，多行必须使用小括号。
-元素有嵌套的，多行，缩进。
-Jsx表达式：使用{}括起来，如果大括号内使用了引号，会当做字符串处理。

 

转载于:https://www.cnblogs.com/harsin/p/11432725.html