React 最佳實踐

時間 2019-12-10

標籤 react 最佳實踐欄目 React 简体版

原文原文鏈接

總體結構javascript

class List extends React.Component {
    
    static propTypes = {
        size: React.PropTypes.oneOf(['large', 'normal', 'small']),
        shape: React.PropTypes.oneOf(['default', 'primary', 'ghost'])
        disabled: React.PropTypes.bool
    };

    static defaultProps = {
        size: 'normal',
        shape: 'default',
        disabled: false
    };
    
    constructor(props) {
        super(props);
        this.state = {
            foo: 'bar'
        };
    }
    
    render() {
        return <div>{this.state.foo}</div>;
    }   
}

基礎規範java

React組件文件使用.jsx擴展名；react
對外暴露的文件名使用index；git
React組件名使用駝峯命名，首字母大寫，實例名首字母小寫；es6
每一個文件只寫一個組件，但多個無狀態組件能夠放在一個文件中；github

方法順序babel

propTypes
defaultProps
constructor()
getChildContext()
componentWillMount()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()
render()

引號ide

JSX屬性值使用雙引號，其餘均使用單引號；函數

<Foo bar="bar" />
<Foo style={{ left: '20px' }} />

空格ui

老是在自閉合的標籤/>前加一個空格；
不要在JSX{}引用括號裏兩邊加空格。

<Foo />
<Foo bar={baz} />

括號

將多行的JSX標籤寫在()裏；

render() {
    return (<MyComponent className="long body" foo="bar">
        <MyChild />
    </MyComponent>);
}

標籤

對於沒有子元素的標籤來講老是閉合的；

<Foo className="stuff" />

組件定義

若是有內部狀態、方法或是要對外暴露ref的組件，使用ES6 Class寫法；

class List extends React.Component {
    // ...
    render() {
        return <div>{this.state.hello}</div>;
    }
}

不然的話，使用函數寫法；

const List = ({ hello }) => (
    <div>{hello}</div>
);

PropsType 和 DefaultProps 寫法

若是有內部狀態、方法或是要對外暴露ref的組件，使用ES7類靜態屬性寫法；
JSX屬性名使用駝峯式風格。
若是屬性值爲true, 能夠直接省略。

class Button extends Component {
    static propTypes = {
        size: React.PropTypes.oneOf(['large', 'normal', 'small']),
        shape: React.PropTypes.oneOf(['default', 'primary', 'ghost'])
        disabled: React.PropTypes.bool
    };

    static defaultProps = {
        size: 'normal',
        shape: 'default',
        disabled: false
    };

    render() {
        // ....
    }
}

不然的話，使用類靜態屬性寫法

const HelloMessage = ({ name }) => {
    return <div>Hello {name}</div>;
};

HelloMessage.propTypes = {
    name: React.PropTypes.string
};

HelloMessage.defaultProps = {
    name: 'vic'
};

State 寫法

使用ES7實例屬性提案聲明寫法或者構造函數聲明寫法，後者適合須要進行必定計算後才能初始化state的狀況。

class Some extends Component {
    state = {
        foo: 'bar'
    };
    // ....
}

class Some extends Component {
    constructor(props) {
        super(props);
        this.state = {
            foo: 'bar'
        };
    }
    // ....
}

函數綁定

在使用ES6編寫React時，不會將方法內部的做用域自動綁定到組件的引用上。
爲此有如下幾種寫法僅供參考：

參考