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})
　　　　　　}