React整潔的代碼的一些原則

1. Model is everything

　　models are  the heart of your app. If you have models separated from th rest of your application, maintaince will be much easier,regradless of how complicated your application becomes. Even for complicated applications, good model implementation can result in extremely expressive code.And to achieve that, start by making sure that your models do only what they meat to do ,and don't concern thenselves with what the app built around it does. Furthermore, it doesn't concern itself with what the underlying data storage layer is:does your app rely on an SQl database,or dose it store everything in text files.

　　As we continue this article, you will realize how great code is a lot about separatiuon of concern.

　　數據模型是一個應用的心臟，當數據模型與應用的其它模塊分離開來的時候，應用的可維護性將變得容易。一個應用的數據模型應該保持單一職責原則，不該該考慮創建的數據模型上的其它模塊，同時也不該該關注數據是如何存儲的。 (MVC)

　　整潔的代碼

　　1.Clean code is a consistent style of programming that makes your code easier to write,read ,and maintain.

　　2.Clean code is DRY (don't repeat yourself)

　　3.Clean code is predictable and testable

　　4.Clean code is self-commenting

　　5.Naming things

　　　　1.Boolean variables,or functions that return a boolean value, should start with "is","has","should"

　　　　2.Functions should be named for what they do,not how they do it.In other words ,don't expose details of the implementation in the name

　　6.Clean code follows proven design patterns and best practices

　　　　1.Use samll fuctions,each with a single responsibility.Ensure that each function does one job and does it well . that also will lead to better testability.

　　　　2.Be on the lookout for leaky abstractions. In onther words, don't impose your internal requirements on consumers of your code.

　　　　3.Follow stric linting rules. This will help you write clean , consistent code.

　　7.Separate stateful aspects from rendering

　　　　Mixing your stateful data-loading logic with your rendering (or resentation) logic can lead to component complexity. Instead, write a stateful container component whose single responsibility is to load the data. Then write another component whose sole responsibility is to display the data. This is called the container pattern. Stateless functional component, the results are predictable.

　　8.Use stateless function components

　　　　Through optimization of React's core,it posible to use far less memory as no instance is created.

　　9. Object destructing

　　　　componentWillReceiveProps(newProps){

　　　　　　 this.setSate({active:newProps.active})

　　　　　　}

　　　　componentWillReceiveProps({active}){

　　　　　　this.setState({active})
　　　　　　}