6条给React开发者的专业建议

1. 使用方法组件

在你不需要使用组建的内部状态和生命周期方法
你可以使用

function welcome(props){
    return <h1>Hello,{props.name}</h1>;
}

来代替

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

使用这种方法的好处:

• 更少的代码,
• 更容易理解,
• 不用处理状态机,
• 测试简单,
• 不需要绑定this,
• 更容易提取较小的组件

2.尽可能的让你的组件小巧

使用这种方法的好处:

• 便于阅读
• 便于测试
• 方便维护
• 方便复用

例如:下面我们把个人中心资料模块进行细分

个人用户信息部分被拆分

class Comment extends Compont{
    render()
     <div className="Comment">
        <UserInfo user={this.props.user}/>
        <div className='Comment-text'>
        {this.props.text}
        </div>
        <div className="comment-text">
        {formatDate(this.props.date)}
        </div>
    </div>
}

在用户信息部分中,头像部分也被拆分成更小的组件

function UserInfo(props){
    renturn (
    <div className="UserInfo">
        <Avatar user={props.name}/>
        <div classNmae='UserInfo-name'>
        {props.user.name}
        </div>
    </div>
    );
}

个人头像部分

function Avatar(props){
    return(
    <img className='Avatar'
        src={props.user.avatarUrl}
        alt={props.user.name}
    </img>
    );
}

3.了解并知道怎样处理'this'

1. 在render中绑定

这种方式虽然简单明了但是有性能问题,因为点击后会调用一个新的函数,每次这个组件都要重新渲染

class HelloWorld extend component{
    contructor(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)}/>
        }
    }
}

2. 在render中使用箭头函数

这种方式和方法1同样会有相同的性能问题

class HelloWorld extend component{
    contructor(props){
        super(props);
        this.state={message:'Hi'};
    }
    logMessage(){
        console.log(this.state.message);
    }
    render(){
        return {
            <input type='button' value='Log' onClick={()=>this.logMessage}/>
        }
    }
}

3. 在构造方法中绑定

这种方式需要记得使用super(props)

class HelloWorld extend component{
   contructor(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}/>
       }
   }
}

4. 在属性中使用箭头函数

有方法1和2的性能问题

class HelloWorld extend component{
   
   this.state={message:'Hi'};
    
   logMessage=()=>{
       console.log(this.state.message);
   }
   render(){
       return {
           <input type='button' value='Log' onClick={this.logMessage}/>
       }
   }
}

4.在更新状态时使用方法而不是对象

user:

this.setState((prevState.props)=>{
    renturn {correctData:!prevState.correctData}
});

not

this.setState({correctData:!this.state.correctData});

5.开发lib时使用'prop-types'

import PropTypes from 'pros-types';

class Welcome extends Component{
    render(){
        return <h1>Hello,{this.props.name}</h1>
        
    }
}
Welcome.propTypes={
    name:ProsTypes.string.isRequired
}

6.使用必要的React 开发工具来帮助我们