React学习笔记
mobx基础属性了解
observable(观察对象)
观察变量变化，如果变量发生变化会自动触发自动执行函数（autorun(()=>{});）。
代码示例
import { observable, autorun } from 'mobx';
const value = observable(0);
const number = observable(100);
autorun(() => {
console.log(value.get());
});
value.set(1);
value.set(2);
number.set(101);
说明
可观察的可以用来观测一个数据，这个数据可以数字，字符串，数组，对象等类型（相关知识点具体会在后文中详述），而当观测到的数据发生变化的时候，如果变化的值处在自动运行中，那么自动运行就会自动执行。
上例中的自动运行函数中，只对值值进行了操作，而并没有数量值的什么事儿，所以number.set(101)这步并不会触发自动运行，只有值的变化才触发了自动运行。
observer(可观察对象)
把组件变成响应式组件，以确保组件渲染中使用的数据变化时都可以强制刷新组件
computed(计算属性)
代码示例
const number = observable(10);
const plus = computed(() => number.get() > 0);
autorun(() => {
console.log(plus.get());
});
number.set(-19);
number.set(-1);
number.set(1);
说明
依次输出了true，false，true。
第一个true是number初始化值的时候，10>0为true没有问题。
第二个false将number改变为-19，输出false，也没有问题。
但是当-19改变为-1的时候，虽然number变了，但是number的改变实际上并没有改变plus的值，所以没有其它地方收到通知，因此也就并没有输出任何值。
直到number重新变为1时才输出true。
React生命周期函数
[图片上传失败...(image-da8dc1-1588151050760)]
constructor():构造函数
执行时间：组件被加载前最先调用，并且仅调用一次
作用：定义状态机变量
注意：第一个语句必须是super（props），正确定义状态机代码如下
constructor(props) {
super(props);
this.state = {
content:null,
}
}
如果第一句不使用super（），错误代码及报错如下
constructor(props) {
this.state = {
content:null,
}
}
'this' is not allowed before super()
componentWillMount()
执行时间：组件初始渲染（render()被调用前）前调用，并且仅调用一次
作用：如果在这个函数中调用setState改变某些状态机，react会等待setState完成后再渲染组件
注意：子组件也有componentWillMount函数，在父组件的该函数调用后再被调用
render()
执行时间：componentWillMount之后，componentDidMount之前，
作用：渲染挂载组件
触发条件：（1）初始化加载页面 （2）状态机改变setState （3）接收到新的props（父组件更新）
注意：组件所必不可少的核心函数；不能在该函数中修改状态机state
componentDidMount()
执行时间：render之后被调用，并且仅调用一次
作用：渲染挂载组件；可以使用refs（备注：React支持一个特殊的属性，你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记，可以方便的定位的这个组件实例。)
注意：子组件也有该函数，在父组件的该函数调用前被调用；如果在该函数中修改某些状态机state，会重新渲染render组件，所以有些组件为减少渲染次数，可以将某些修改状态机的操作放在componentWillMount函数中；如果需要再程序启动显示初始化页面后从网路获取数据，可以将网络请求代码放在该函数中
componentWillReceiveProps(nextProps)
执行时间：组件渲染后，当组件接收到新的props时被调用；这个函数接收一个object参数（新的props）；props是父组件传递给子组件的。父组件发生render的时候子组件就会调用
作用：渲染挂载组件；可以使用refs（备注：React支持一个特殊的属性，你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记，可以方便的定位的这个组件实例。）
注意：react初次渲染时，该函数并不会被触发，因此有时该函数需要和componentWillMount或componentDidMount组合使用;使用该函数一定要加nextProps参数，首次使用了解的可以先打印结果（console.log(nextProps)）
shouldComponentUpdate(nextProps, nextState)
执行时间：组件挂载后（即执行完render），接收到新的state或props时被调用，即每次执行setstate都会执行该函数，来判断是否重新render组件，默认返回true；接收两个参数：第一个是心的props，第二个是新的state。
作用：如果有些变化不需要重新render组件，可以在该函数中阻拦
注意：该方法在初始化渲染的时候不会调用，在使用forceUpdate方法的时候也不会
componentWillUpdate()
执行时间：在接收到新的props 或者 state，重新渲染之前立刻调用，在初始化渲染的时候该方法不会被调用
作用：为即将发生的重新渲染做一些准备工作
注意：不能再该函数中通过this.setstate再次改变状态机，如果需要，则在componentWillReceiveProps函数中改变
componentDidUpdate()
执行时间：重新渲染后调用，在初始化渲染的时候该方法不会被调用
作用：使用该方法可以在组件更新之后操作DOM 元素
componentWillUnmount()
执行时间：组件被卸载前调用
作用：在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。
React路由传递参数
1.query方式（在刷新页面的时候，参数丢失）
传递参数示例代码：
class Test extends React.Component{
render(){
//参数
const data={id:'123'};
const path = {
//跳转页面地址
pathname:'/getParams',
//需要传递的参数
query:data
}
return(
<div>
<Link to={path}>超链接1</Link>
</div>
)
}
}
export default Test;
接受参数示例代码：
class getParams extends React.Component{
constructor(props) {
super(props);
}
render(){
//在props对象中获取query对象
const data=this.props.location.query.id;
return(
<div>
接收到的参数：{data}
</div>
)
}
}
export default getParams;
2.state（在刷新页面的时候，参数不会丢失）
使用方式同query方式。
传递参数示例代码：
class Test extends React.Component{
render(){
//参数
const data={id:'123'};
const path = {
//跳转页面地址
pathname:'/getParams',
//需要传递的参数
state:data
}
return(
<div>
<Link to={path}>超链接1</Link>
</div>
)
}
}
export default Test;
接受参数示例代码：
class getParams extends React.Component{
constructor(props) {
super(props);
}
render(){
//在props对象中获取query对象
const data=this.props.location.state.id;
return(
<div>
接收到的参数：{data}
</div>
)
}
}
export default getParams;
ecology9开发注意点
-
当使用WeaBrowser组件想使用的标准浏览按钮在API文档上不存在时
在数据库中查询wf_browser_config表type字段则为组件中type值
学习中遇到的问题
-
1.nginx在使用反向代理连接ecology与react_dev环境时访问异常缓慢。
原因是由于nginx.conf中本地ip使用的是“localhost”方式，将“localhost”修改为“127.0.0.1”之后问题得到解决，具体“localhost”不可使用的原因有待研究。
-
2.render中的return如果存在多个元素标间的话会报错。
当继承React.Component时return中的元素需要有一个最外层的"div"标签进行包裹，代码如下
class Report extends React.Component {
render() {
return (
<div>
<WeaTop
title={<span style={{ color: '#f00' }}>标题</span>}
icon={<i className='icon-portal-workflow' />}
iconBgcolor='#55D2D4'
buttons={btns}
/>
<WeaRadioGroup config={config} onChange={(params)=> {console.log('params', params)}}/>
</div>
)
}
}
-
报错：Uncaught TypeError: Super expression must either be null or a function, not undefined
出现这个问题百分之99.99是因为单词写错了，反正我是把Component写成了Components
-
报错：Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
出现这个问题，我也搞了很久，最后把 import { Foot } from './foot.js' 改成了 import Foot from './foot.js' 就解决了，使用export default时，对应的import语句不需要使用大括号，不使用export default时，对应的import语句需要使用大括号。
-
使用getInitialState()返回state在return及方法中获取state默认值返回“unidentified”，错误代码如下
getInitialState () {
this.setState({
submitloading:false,
//是否显示凭证字固定值字段
showpzzgdz:false
})
return{}
}
错误原因分析：getInitialState()方法只会被调用一次；返回值将会被当成this.state的初始值；
正确代码：
getInitialState () {
return{
submitloading:false,
//是否显示凭证字固定值字段
showpzzgdz:false
}
