2018-09-16 6Pro Tips From React Developers

[原视频点我](https://www.youtube.com/watch?v=xa-_FIy2NgE&t=56s&index=2&list=LLHgsUUQ9SKeWlFOhFK3-KLg)

(译)6个给React开发者的专业建议.
#1.使用函数式组件.
如果你不需要使用内部状态或者生命周期的话,那么请使用函数式组件.
这是一个以Class为基础的组件:

class Welcome extends Components{
        render ()
        {
            return <h1>Hello,{this.props.name}</h1>
        }
    }

而下面是一个纯函数式组件:

function Welcome(props){
    return <h1>Hello,{props.name}</h1>
    }
这个函数式组件接受props为参数并返回React元素.

使用函数式组件有如下好处:

1. 更少的代码
 2. 更容易理解
 3. 无状态
 4. 易测试
 5. 无this绑定
 6. 更容易提取出较小的组件.

#2.保持你的组件尽可能小
小的组件更容易:

1. 阅读
 2. 测试
 3. 维护
 4. 重用

假设这里我们有一个评论组件:

class Comment extends Component{
    render(){
    return (
    <div className = "Comment">
        <div className = "UserInfo">
            <img className = "Avatar"
            src = {this.props.user.avatarUrl}
            alt = {this.props.user.name}
            />
            <div className = "UserInfo-name">
            {this.props.user.name}
            </div>
        </div>
        <div className = "Comment-text">
        {this.props.text}
        </div>
        <div className = "Comment-date">
        {fromatDate(this.props.date)}
        </div>
        </div>
        )
     }
    }

如果我想要在我的应用中使用用户信息,那么我就需要将这一部分代码抽象成一个组件:

抽象为UserInfo组件:
        
    function UserInfo(props){
        return(
        <div className = "UserInfo">
        <img className = "Avatar"
            src = {props.user.avatarUrl}
            alt = {props.user.name}
        />
        <div className ="UserInfo-name">
            {props.user.name}
        </div>
        </div>
        );
        }
        
使用时直接引用:
        
    <UserInfo user={this.props.user}/>

然后我们会发现,该组件可以进一步抽象为Avatar函数组件:

function Avatar(props){
    return (
    <img className = "Avatar"
        src = {props.user.avatarUrl}>
        alt = {props.user.name}
        />
    }
使用更小的组件可以保证你的代码更加易懂.

#3.明白如何掌控好this.
还记得第一个tips吗?因为函数式组件不需要绑定this,你会想在任何可能的情形下使用它们.但是如果你使用了ES6,React并不会帮你在组件内自动绑定this.

##3-1 在render中绑定

class HelloWorld extends Component {
     constructor(props){
        super(props);
        this.state = {message:'Hi'}
     }
     logMessage(){
        console.log(this.state.message);
     }
     render(){
    return (
        <input type="button" value="Log" onClick ={this.logMessage.bind(this)}/>
        //注意这里
    )
     }
    }
这样的写法简单明了,可以使用.但是这样使用会导致一些微小的问题,因为一个新的函数将会在这个函数每次重新渲染时都被call一次.

##3-2 使用箭头函数

class HelloWorld extends Component {
     constructor(props){
        super(props);
        this.state = {message:'Hi'}
     }
     logMessage(){
        console.log(this.state.message);
     }
     render(){
    return (
        <input type="button" value="Log" onClick ={()=>this.logMessage()}/>
        //注意这里
    )
     }
    }
    
使用箭头函数进行this的绑定会和方法一一样的简洁明了.但是和方法一一样,它也会在这个组件每次render的时候都创建一个新的函数.

##3-3 在constructor中进行bind

class HelloWorld extends Component {
     constructor(props){
        super(props);
        this.state = {message:'Hi'} 
        this.logMessage=this.logMessage.bind(this)
        //注意这里
     }
     logMessage(){
        console.log(this.state.message);
     }
     render(){
    return (
        <input type="button" value="Log" onClick ={this.logMessage}/>
        //注意这里
    )
     }
    }

为了解决这个创建新函数的问题,我们只需要在constructor中绑定this即可.

##3-4 Class Prop中的箭头函数
另外一个方法是在class的property中使用箭头函数绑定this.

class HelloWorld extends Component {
     constructor(props){
        super(props);
        this.state = {message:'Hi'} 
     }
     logMessage=()=>{
     //注意这里
        console.log(this.state.message);
     }
     render(){
    return (
        <input type="button" value="Log" onClick ={this.logMessage}/>
        //注意这里
    )
     }
    }
用这个方法即可完整的避免以上几种方式造成的问题.

**启示:其实一直就是用3-4的方法写的,只是一直没有明白为什么.看起来React的相关原理需要好好看一看了.**

#4.使用函数来设置setState,而不是一个Object
在setState中使用一个函数而不是一个Object.
原因:
在ReactDoc中说明过,使用Object的方式设置setState并不会让设置的值立刻生效.因此,在setState之后读取这个state事实上是可能存在陷阱的-因为这个state可能并不会是你想要的state.
例子:

this.setState({correctData:!this.state.correntData});
    
    
 这种设置state的方法就会导致setState的不确定.应该使用下面这种方式来替换.
    
    this.setState((prevState,props)=>{
        return {currectData:!prevState.correctData})
    }

这样的写法就能够保证你的setState以一个异步的姿态进行赋值,从而保证赋值的正确性.

#5.利用prop-types.
此段省略,讲述的是使用prop-types这个库来进行组件的类型检查.Ts可以做到更进一步.

#6.使用React开发者工具
省略,每天都在用,感觉没有说的必要了.

2018-09-16 22:08:15 完成本周积累.

No Silver Bullet.

导航

最近发表

友情链接