平时写react 小技巧
- Stateless function 无状态组件平时写组件用到比较多的就是无状态组件，不但优雅，也是优化react性能的一种手段。
const Greeting = ({ name, style }) => { return <div style={style}>{name}</div> };
- Array as children 把数组数据渲染出来
常常会遇处处理数组数据的状况，能够用下面的方式简单的渲染出来。javascript
render() { return ( (<ul> {List.map((item) => ( <li>{item}</li> ))} </ul>) ) }
- 封装基础类组件
好比
<input type="text" >每次写很麻烦吧，能够封装一个成一个组件cssconst input = (props) => { return <input type = {props.type} {...props} /> } - Layout Component 布局组件
组件能够分红不少类类，有的是布局类，有的是功能类。下面是一种布局类的组件。html
<FlexContainer> <div style={{ flex: 1 }}>{this.props.leftSide}</div> <div style={{ flex: 2 }}>{this.props.rightSide}</div> </FlexContainer>
- Higher Order Component 高阶组件
高阶组件很像decorator，提高组件的能力。好比你想一些组件里面使用一下功能，react-router 中java
import { withRouter } from 'react-router' withRouter(SomeComponent)例子：node
var Enhance = ComposedComponent => class extends React.Component { componentDidMount() { this.setState({ name: "李狗子" }); } render() { return <ComposedComponent {...this.props} name = {this.state.name} />; } }; - 受控组件，不受控组件
项目中常常会用到这两种状况如：
受控组件，更新的时候须要使用this.setStatereactconstructor() { super(); this.state = {value: ""} } render() { return <input type="text" value={this.state.value} /> }不受控组件，主要须要经过ref来获取input的值。git
render() { return <input type="text" ref="myInput" /> }两种方法均可以在特定的场合去使用，我的以为数据相对重要的页面须要使用受控组件会比较合适。github
- 使用三元表达式
项目中常常有判断语句，用三元表达式能够很方便的写出想要的逻辑npm
const demo = ({ isOK }) => { return isOK ? <p> Yes </p> : <p> No </p> }; - 给setState传入function
可使用function来更新state数组
this.setState((prevState, props) => ({ return ... })); - 经过ref属性获取component
场景：下面的例子是初始化组件后，让input默认获取光标。ref最终指向的已经渲染好的DOM节点，或者是react class的实例。具体能够看官方的文档
componentDidMount() { this.input.focus(); } render() { return ( <input ref={comp => { this.input = comp; }} /> ) } - 切勿使用...props传递数据
一个很是错误的作法好比：
<Component {...props} />props上面若是有很是多的属性，会形成很是昂贵的计算。正确的应该
<Component name = { props.name } />
以上是平时写React用到的一些写法小技巧，说有用还蛮有用的！
有错误的地方还请指正！谢谢你们。
下面2个连接都很棒哦！记得收藏star...
参考：
https://github.com/vasanthk/react-bits
react 代码规范
https://github.com/airbnb/javascript/tree/master/react
dangerouslySetHTML 和 style 属性
dangerouslySetHTML
出于安全考虑的缘由（XSS 攻击），在 React.js 当中全部的表达式插入的内容都会被自动转义，就至关于 jQuery 里面的 text(…) 函数同样，任何的 HTML 格式都会被转义掉：
class Editor extends Component { constructor() { super() this.state = { content: '<h1>React.js 小书</h1>' } } render () { return ( <div className='editor-wrapper'> {this.state.content} </div> ) } }
假设上面是一个富文本编辑器组件，富文本编辑器的内容是动态的 HTML 内容，用 this.state.content 来保存。我但愿在编辑器内部显示这个动态 HTML 结构，可是由于 React.js 的转义特性，页面上会显示：
表达式插入并不会把一个 <h1> 渲染到页面，而是把它的文本形式渲染了。那要怎么才能作到设置动态 HTML 结构的效果呢？React.js 提供了一个属性 dangerouslySetInnerHTML，可让咱们设置动态设置元素的 innerHTML：
...
render () {
return ( <div className='editor-wrapper' dangerouslySetInnerHTML={{__html: this.state.content}} /> ) } ...
须要给 dangerouslySetInnerHTML 传入一个对象，这个对象的 __html 属性值就至关于元素的 innerHTML，这样咱们就能够动态渲染元素的 innerHTML 结构了。
有写朋友会以为很奇怪，为何要把一件这么简单的事情搞得这么复杂，名字又长，还要传入一个奇怪的对象。那是由于设置 innerHTML 可能会致使跨站脚本攻击（XSS），因此 React.js 团队认为把事情搞复杂能够防止（警示）你们滥用这个属性。这个属性没必要要的状况就不要使用。
style
React.js 中的元素的 style 属性的用法和 DOM 里面的 style 不大同样，普通的 HTML 中的：
<h1 style='font-size: 12px; color: red;'>React.js 小书</h1>
在 React.js 中你须要把 CSS 属性变成一个对象再传给元素：
<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小书</h1>
style 接受一个对象，这个对象里面是这个元素的 CSS 属性键值对，原来 CSS 属性中带 - 的元素都必需要去掉 - 换成驼峰命名，如 font-size 换成 fontSize，text-align 换成 textAlign。
用对象做为 style 方便咱们动态设置元素的样式。咱们能够用 props 或者 state中的数据生成样式对象再传给元素，而后用 setState 就能够修改样式，很是灵活：
<h1 style={{fontSize: '12px', color: this.state.color}}>React.js 小书</h1>
只要简单地 setState({color: 'blue'}) 就能够修改元素的颜色成蓝色。
Prop 验证
随着应用不断变大，保证组件被正确使用变得很是有用。为此咱们引入propTypes。React.PropTypes 提供不少验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 propTypes。下面用例子来讲明不一样验证器的区别：
React.createClass({ propTypes: { // 能够声明 prop 为指定的 JS 基本类型。默认 // 状况下，这些 prop 都是可传可不传的。 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // 全部能够被渲染的对象：数字， // 字符串，DOM 元素或包含这些类型的数组。 optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操做符声明 prop 为类的实例。 optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 来限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 指定的多个对象类型中的一个 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定类型组成的数组 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型的属性构成的对象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定形状参数的对象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 之后任意类型加上 `isRequired` 来使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型 requiredAny: React.PropTypes.any.isRequired, // 自定义验证器。若是验证失败须要返回一个 Error 对象。不要直接 // 使用 `console.warn` 或抛异常，由于这样 `oneOfType` 会失效。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new