React学习

参考教程

1、新建以及运行工程

npx create-react-app my-app
cd my-app
npm start

2、jsx 可以写在js当中，需要加{}

return <h1>Hello, {formatName(user)}!</h1>;

3、react使用className代替class

4、ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点

5、react dva 整体的调用接口获取数据渲染页面流程

5.1、config里面配置接口地址

5.2、声明接口进入model

product.js

在加dispatch的时候需要加connect，引入

componentDidMount() {
    this.props.dispatch({
        type: 'app/getData',
        payload: {
            "appKey": "string",
            "data": "",
            "version": "string"
        }
    })
}

5.3、model api.js调用service的异步方法

effects: {
    *getData({ payload }, { call, put }) {
        const res = yield call(getData, payload)
        if (isSuccess(res)) {
            yield put({
                type: 'set',
                payload: {
                    toadyFee: res.data.toadyFee,
                    toadyRevenue: res.data.toadyRevenue,
                    todayEstimatedEarnings: res.data.todayEstimatedEarnings,
                    todayRealIncome: res.data.todayRealIncome,
                    todayShareBenefit: res.data.todayShareBenefit 
                }
            })
        }
    },
}

5.4、model拿到service返回的数据，通过reducers将数据传给页面，渲染页面

reducers: {
	set(state, {payload}) {
		return {
			...state,
			...payload
		}
	}
}

5.5、或者直接在页面调用接口获取数据

6、bug总结

componentWillMount里面不能使用setState

可以写在componentWillReceiveProps里面

7、input onchange 方法 参考rule.js

<input onChange={(e)=>{this.searchList(e,'1234')}}>
searchList =(e,a) =>{
    var text = ev.target.value;
    console.log(e);
    console.log(a);
}

8、初始页面渲染数据

react render在进入页面的时候，在model加默认初始化值，页面加载时调用model里面的query方法

componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'rule/query' });
}

9、获取当前select下的option的索引

const index = rules.findIndex((v, i) => { return v.serviceTypeId === serviceTypeId - 0; });

10、connect用法

app是model的props，renderList是页面的键，app.renderList是model里面的值

export default connect(
    ({ app }) => ({ renderList: app.renderList })
)(Usermanage);

页面拿到值之后在render里面渲染页面

给各个字段赋值

const { toadyFee = 0, toadyRevenue = 0, todayEstimatedEarnings = 0, todayRealIncome = 0, todayShareBenefit = 0} = this.props.app;

11、react点击事件

onClick={(e)=>{this.toggle(e,item.id)}}

toggle = (e,id) => {
    console.log('id is' + id)
}

12、react方法要绑定this才能获取当前this的值，两种方法

a、onClick={this.toggleAllot.bind(this)
b、add = () => {
    console.log(this.state)
}

13、切换样式可以通过三目运算实现，参考新增运营商页面的开启和关闭

14、路由跳转传值

a、在路由里面声明，id代表所传参数

<Route path="/benifitDetail/:id" component={BenifitListDetail}/>

b、跳转方法，列表页

引入context

ShareList.contextTypes = {
    router: PropTypes.object
}

使用push跳转

toDetail = (id) => {
    this.context.router.push('/benifitDetail/'+id);
}

c、获取参数id，详情页

let {id} = this.props.params;

15、componentWillReceiveProps

每当我们通过父组件更新子组件 props 时（这个也是唯一途径），这个方法就会被调用。

componentWillReceiveProps(nextProps){}

nextProps指的是在新一次接收到的props，会覆盖旧的空数据

16、钩子函数

参考：https://blog.csdn.net/zhou_xiao_cheng/article/details/52461414

a、 componentWillMount() 

仅在render()方法前被调用一次；

b、componentDidMount() 

仅在render()方法后被调用一次，如果使用js框架或者类似setInterval()这样的方法，建议在该方法内使用；

c、ShouldComponentUpdate(object nextProps, object nextState) 

在初始渲染调用render()方法时不会被调用，后面在接受到新的state或者props时，在render()方法前被调用。为防止一些潜在的bug，该方法默认总是返回true。如果你确定state及props改变后不需要渲染组件，那么也可以指定返回false，需要注意的是，这样的结果会导致后面的render()、componentWillUpdate()、componentDidUpdate()都不会被调用。

d、componentWillReceiveProps(object nextProps) 

在初始渲染调用render()方法时不会被调用，当接收到一个新的props时，该方法被调用。我们都知道，如果改变一个状态的值，则会触发render()方法，所以可以在这个方法里调用setState()方法去改变一个状态的值，当该方法接收到新的props时，setState()就可以避免一次额外的render()了。

e、componentWillUpdate(object nextProps, object nextState) 

在初始渲染调用render()方法时不会被调用，当接收到新的props及state时，在render()方法之前被调用。

f、componentDidUpdate(object prevProps, object prevState) 

在初始渲染调用render()方法时不会被调用，当组件更新被刷新到DOM之后被立即调用。

在组件从DOM上卸载前被调用，在这个方法里面，我们主要是完成一些清除操作，比如

g、componentWillUnmount() 

在组件从DOM上卸载前被调用，在这个方法里面，我们主要是完成一些清除操作，比如说清除掉一些过时了的定时器等。