React-总结

React

1.项目基本配置

• 使用create-react-app 脚手架 + react+antd-mobile开发
• 使用 axios 封装网络请求
• 使用react-router-dom实现路由配置
• 布局采用Flexbox盒模型布局方案
• 建议使用JSX 语法，可以使用内联样式
• 元素取值和赋值 : this.props.属性名 赋值:setState
• 向事件处理程序传递参数 : onClick={this.preventPop.bind(this,this.state.name)}
• map() 方法来创建列表 数据驱动UI，根据返回数据创建多个标签
• 状态更新可能是异步的
• 单页应用中，使用less写样式，公共样式文件重复载入 : 最外层id名称使用页面名称+container
• 文字溢出
• 多个Audio 实例控制只播放当前的，暂停其他Audio实例
• 新版微信中H5页面底部白条问题 : 避免微信二次授权
• 页面大图处理

常见组件封装

轮播图Banner、拼团倒计时、自定义Modal弹出框、消息上下轮播、Tabs切换组件、收件地址弹窗

2.组件生命周期

组件生命周期

3.Redux详解

React-Redux 提供provider组件，能够==使你的整个app 访问到Redux store 中的数据==：

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import myApp from './reducers'
import App from './components/App'
let store = createStore(myApp);
render(  <Provider store={store}>    <App />  </Provider>,  
document.getElementById('rootElement'))

将所有组件分成两大类：

• UI 组件（负责 UI 的呈现,不带有任何业务逻辑,没有状态，又称纯组件）
• 容器组件（负责管理数据和逻辑,不负责 UI 的呈现,带有内部状态,使用 Redux 的 API）。

提供一个connect方法能够让你把组件和store连接起来

import { connect } from "react-redux";
import { increment, decrement, reset } from "./actionCreators";
// const Counter = ...
const mapStateToProps = (state /*, ownProps*/) => {
  return {
    counter: state.counter
  };
};
const mapDispatchToProps = { increment, decrement, reset };
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

UI 组件和容器组件的结合: 外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。
React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。

Provider 组件

让容器组件拿到state。方便通信