4、css module
CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。
在create-react-app2.0之前的版本，配置CSS Modules是需要eject弹出webpack来配置的，幸运的是，create-react-app自从2.0.版本就已经开始支持CSS Modules了
(1)局部样式
命名规则: xxx.module.css 引入方式 import xxx from 'xxx.module.css' 用法：<div className={xxx.styleName}>(2)全局样式
命名规则: xxx.css 引入方式 import ‘xxx.css’ 用法：<div className='styleName'>全局样式与局部样式混合使用：
<div className={`styleName ${xxx['styleName']}`} >其中styleName表示全局样式 ${xxx['styleName']表示局部样式，注意{ }内使用模板字符串 ·
5、css多类名写法
(1) css module模块中写法
<div className={[`${styles.sideInBox}`,`${styles.sideTitleBox}`].join(' ')}></div>(2) 如果是全局样式写法
className={`title ${index === this.state.active ? 'active' : ''}`} React条件渲染的几种方式参考https://www.cnblogs.com/xiaodi-js/p/9119826.html
1、条件表达式
<div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div>2、&&操作符
<div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div>3、列表遍历
jxs的语法，js代码要放在{}里面，html标签使用return (）包裹
return ( <div className='appList-container'> <ul className='list'> { this.props.list.map((item, index) => { return ( <li className='list-item' key={index}> <div className='app-index'>{index+1}</div> <img className='app-icon' src=http://www.likecs.com/{item['im:image'][0].label} alt="" /> <div className='app-info'> <div className='app-name'>{item['im:name'].label}</div> <div className='app-categray'>{item.category.attributes.label}</div> </div> </li> ) }) } </ul> </div> ); 事件处理 <button onClick={this.handleClick}>ck me </button>两种事件传参方式
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button> 获取input表单值两种方法，受控组件和非受控组件。
推荐使用受控组件，即通过this.state获取，因为其符合react规范；
非受控组件，给标签指定ref属性
<input className='search-bar' type="text" ref='keyword' onKeyUp={this.appSearch.bind(this)}> appSearch(e){ let keyword = this.refs.keyword.value } react中使用防抖 appSearch = debounce(() => { }, 500); 组合组件参考https://www.jianshu.com/p/0b005dc60bda
在react开发中，在某些场景会遇到如下组件嵌套形式的开发，例如group和cell或者RadioGroup、RadioOption
<RadioGroup> <RadioOption label="选项一" value="1" /> <RadioOption label="选项二" value="2" /> </RadioGroup>, state定义及赋值 constructor(props) { super(props); this.state = { appList:[] }; } this.setState({ appList: feed.entry }) 父子组件传参1、父传子
<AppList list={this.state.appList}></AppList>在子组件获取值
this.props.list2、子传父
触发父组件事件
this.props.appSearch(keyword);父组件监听事件
<Search appSearch={this.appSearch.bind(this)}></Search> 引入redux和react-redux、redux-thunk文档
https://react-redux.js.org/introduction/quick-start
类似vuex，redux是一个数据状态管理工具，但是用法和vuex有些区别
react-redux帮助你完成数据订阅，redux-thunk可以放你实现异步action，redux-logger是redux的日志中间件
redux-thunk 是一个比较流行的 redux 异步 action 中间件。redux-thunk 帮助你统一了异步和同步 action 的调用方式，把异步过程放在 action 级别解决，对 component 没有影响
import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; // 创建store的时候，第二个参数是中间件，redux-thunk提供了一个thunk中间件，用于处理异步的action export default createStore( rootReducer, applyMiddleware(thunk) );1、对redux的理解
(1)单一数据源：
整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中
(2)State只读：
唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象
(3)执行修改：
为了描述 action 如何改变 state tree ，你需要编写 reducers
Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state
随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分
2、对mapStateToProps和mapDispatchToProps的理解