1.render中最好不要放处理数据的逻辑,不能改变props,state的值,不然render后又得render一次,造成多次render),render中不要用localStorate,和sessionStorage(这算是操作数据,最好让render之负责展现,术业有专攻).

在组件中,最好不要对props赋值,如果想赋值就用state.因为props可以说是父组件传递的,是固定的。而state是组件自己的,想怎么搞就怎么搞.所以this.props一般在等号的右边;this.state一般在等号的左边。这也是为什么有了props还要有一个state的原因。

2.在pleageRedux中请求服务器数据,并将结果dispatch,也可以在结果中再添加一些数据再dispatch,,这样,在pledge.js中就可以用this.prop来获取这些结果了。

3.在willMount中设置数据setState,不会render.而会在willMount之后render.

4.

class Pledge extends Component{
    constants = {
        pages: {
            ...
        },
    }

    state = {
        ...
    }
}

像上面这种情况,可以不用写

constructor(props){
    super(props);
}

这时候,系统自动帮你把这一步做了。

如果是UI组件的话,最好有

static defaultProps = {
    
}
static propTypes = {
    
}

5.实现处理的handeler函数,最好写成

const handler = () => {
    
}

这样可以自动绑定this

使用最简的

const handler() {
    
}

则不能自动绑定。

但是render函数则经常使用

render() {
    
}

用以简化代码
6.使用以下代码

func = () => {
    console.log('sss');
};

结尾要加分号。而使用以下代码,结尾不用加分号。

func () {
        console.log('sss');
    }

7.当if语句里面没有表达式,只是某个值时 如 if (XXX) 它会自动执行Boolean(xxx)操作, 即 if(XXX) = if(Boolean(xxx))


wscops
55 声望3 粉丝

要成为优秀攻城狮的男人