react系列
3.react-router 和react-router-dom的区别 https://blog.csdn.net/sinat_17775997/article/details/69218382
4.Route关联component有多种形式(render、component、children) children定义形式与render和component的不同在于，children的执行与match无关，即使match为null，children函数也是会执行的
(1) component 会重复加载，每次重新调用React.createElement(component, props)
(2) render 内联渲染，不会重新加载
5.插入html元素
6.redux-thunk
redux-thunk实现了相关异步流程内聚到redux的流程中，实现middleware的功能，也便于项目的开发与维护，避免冗余代码。而实现的方式便是改写redux中的dispatch API，使其可以除PlainObject外，接受一个函数作为参数。
//action.js const custom = (data) => { type: 'SET_CUSTOM_DATA', data: data } dispatch(custom({})) //redux-thunk const custom = (data) => { return async (dispatch, getState) => { //异步操作 dispatch({ type: 'SET_CUSTOM_DATA', data: data }) } }
dispatch(custom({}))
7. react-redux中<Provider>组件的作用，以及如何实现异步加载reducer
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp);
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
//App的所有子组件就默认都可以拿到state
//它的原理是React组件的context属性
class Provider extends Component {
//store放在了上下文对象context上面。然后，子组件就可以从context拿到store
getChildContext() {
return {
store: this.props.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: React.PropTypes.object
}
//子组件调用
class VisibleTodoList extends Component {
componentDidMount() {
const { store } = this.context;
this.unsubscribe = store.subscribe(() =>
this.forceUpdate()
);
}
render() {
const props = this.props;
const { store } = this.context;
const state = store.getState();
// ...
}
}
VisibleTodoList.contextTypes = {
store: React.PropTypes.object
}
//react组件的context属性应用，将store嵌入，通过this.context.store获取
//injectReducer在项目中异步加载reducers，具体的reducer可以在生命周期函数中加载进去
8. react-redux
export default connect(function (state, props){ /*return { ...state, name: [state.name, props.name] };*/ // state, props如果同名，可以通过这个函数决定是获取哪个 return state.user; }, { setName(name){ return { type: SET_NAME, name }; }, addAge(n){ return { type: ADD_AGE, n } } })(App);
9. 高阶组件
//withHoc.js import React, { Component } from 'react'; export default (params) => (WrappedComponent) => { return class From extends Component { //方便使用react-devtool调试时显示不同组件名 static displayName = `From(${WrappedComponent.name || WrappedComponent.displayName})` render() { return ( <div className="withHoc"> <div>{params}</div> <WrappedComponent {...this.props} {...this.state}></WrappedComponent> </div> ); } } } //a.js import React, { Component } from 'react'; import withHoc from './withHoc.js'; class A extends Component { render() { return ( <div className="A"> <div>A component</div> </div> ); } } export default withHoc('a')(A);
10. withRouter
目的就是让被修饰的组件可以从属性中获取history,location,match,
路由组件可以直接获取这些属性，而非路由组件就必须通过withRouter修饰后才能获取这些属性了，
比如 <Route path='/' component={App}/>
App组件就可以直接获取路由中这些属性了，但是，如果App组件中如果有一个子组件Foo，那么Foo就不能直接获取路由中的属性了，必须通过withRouter修饰后才能获取到。
//用于js实现路由跳转 this.props.history.push('/chat)
11. Redux DevTools 扩展的使用说明
if (process.env.NODE_ENV === 'development') { const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__ if (typeof devToolsExtension === 'function') { enhancers.push(devToolsExtension()) } } const composedEnhancers = compose( applyMiddleware(...middlewares), ...enhancers ) //或者 const enhancers = [] let composeEnhancers = compose // 在development模式，使用redux-devtools-extension if (process.env.NODE_ENV === 'development') { if (typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ === 'function') { composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ } } const store = createReduxStore( makeRootReducer(), initialState, composeEnhancers( applyMiddleware(...middleware), ...enhancers ) )
12. 常用npm包
connected-react-router core-js
reselect // computed
redux-undo // 撤销，重做
react-loadable //懒加载
13. px2rem
// config-overrides.js const px2rem=require('postcss-px2rem-exclude') module.exports = { webpack: override( // 用js的方式导入antd及其样式：style为true表示导入antd.less; 为false表示不使用js的方式导入antd.less或antd.css；为'css'表示使用antd.css; fixBabelImports("import", { libraryName: "antd-mobile", libraryDirectory: "es", style: true // 为false或css会导致addLessLoader失效 }), addLessLoader({ javascriptEnabled: true, // modifyVars: { "@primary-color": "#D24545" } // 深红色 }), addPostcssPlugins([ px2rem({ remUnit: 75, // 仅排除对antd-mobile的px2rem转化 exclude: /node_modules\/antd-mobile/i }) ]), disableEsLint() // 取消eslint检查，加快yarn start速度 ), devServer: overrideDevServer( // dev server plugin watchAll() ) }
// 某一项不想转为rem
border: 1px solid #ccc; /*no*/
vue-cli3用的是postcss-plugin-px2rem; 实现原理一样。重要！！ 如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px
14. withRouter导致组件重复渲染
React Router 4 把Route当作普通的React组件，可以在任意组件内使用Route；
withRouter 为非路由组件提供了location，history，match三个参数；但是有时会发现有些接口会重复调用，这个是由于组件重新渲染的原因
经过Redux connect后的Home组件，在更新阶段，会使用浅比较，但是由于Route组件导致这个失效
componentWillReceiveProps(nextProps, nextContext) { warning( !(nextProps.location && !this.props.location), '<Route> elements should not change from uncontrolled to controlled (or vice versa). You initially used no "location" prop and then provided one on a subsequent render.' ) warning( !(!nextProps.location && this.props.location), '<Route> elements should not change from controlled to uncontrolled (or vice versa). You provided a "location" prop initially but omitted it on a subsequent render.' ) // 注意这里，computeMatch每次返回的都是一个新对象，如此一来，每次Route更新，setState都会重新设置一个新的match对象 this.setState({ match: this.computeMatch(nextProps, nextContext.router) }) } render() { const { match } = this.state const { children, component, render } = this.props const { history, route, staticContext } = this.context.router const location = this.props.location || route.location // 注意这里，这是传递给Route中的组件的属性 const props = { match, location, history, staticContext } if (component) return match ? React.createElement(component, props) : null if (render) return match ? render(props) : null if (typeof children === 'function') return children(props) if (children && !isEmptyChildren(children)) return React.Children.only(children) return null }
这样，每次Route更新（componentWillReceiveProps被调用），都将创建一个新的match；
导致Redux的浅比较失败，进而触发组件的重新渲染
解决方法：1⃣️. connected-react-router 2⃣️. 直接引用history.js文件
15.input 在IE11，不触发onchange
<input type='text' value={this.state.value} onCompositionStart={this.handleComposition} onCompositionUpdate={this.handleComposition} onCompositionEnd={this.handleComposition} onChange={this.handleChange} /> //前2个事件都在onChange之前触发，onCompositionEnd是在onChange之后触发。 //如果直接输入完成是不会触发这三个事件的，只有onChange事件。比如直接输入英文 // ie11下中文输入法会不触发onChange,所以也需要setState,否则此时会发现中文输入进去后输入框没有变换 /** * 中文输入法，选词 */ handleComposition = (e) => { this.isOnComposition = e.type !== 'compositionend' if (!this.isOnComposition) { //ie11不触发onchange导致中文不展示 this.setState({ value: e.target.value }) this.handleInputAndSearch(e.target.value) }
16. 如果map的组件为受控组件，则使用索引并不会产生问题，但是如果为非受控组件，例如input等，则会由于复用标签元素导致value并未更改
17. setState机制（https://github.com/sisterAn/blog/issues/26）
批处理的原因，举例来说，如果我们在浏览器中click处理，都Child和Parent调用setState，我们不想重新渲染Child两次
补充，这里输出 0，0，3，4
componentDidMount() { this.setState((prevState, props) => ({ val: prevState.val + 1 })) console.log(this.state.val) this.setState((prevState, props) => ({ val: prevState.val + 1 })) console.log(this.state.val) setTimeout(() => { this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 3 次 log this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 4 次 log }, 0); }
// 0，1 "logbefore"， 2 "log"，3，4 componentDidMount() { this.setState((prevState, props) => ({ val: prevState.val + 1 })) console.log(this.state.val) Promise.resolve().then(() => { console.log(this.state.val, 'logbefore'); this.setState({val: this.state.val + 1}); console.log(this.state.val, 'log'); }) setTimeout(() => { this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 3 次 log this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 4 次 log }, 0); }
源码路径（v16.9.0）
/react/packages/react-test-renderer/src/ReactShallowRenderer.js
class Updater { constructor(renderer) { this._renderer = renderer; this._callbacks = []; } //... enqueueSetState(publicInstance, partialState, callback, callerName) { this._enqueueCallback(callback, publicInstance); const currentState = this._renderer._newState || publicInstance.state; if (typeof partialState === 'function') { partialState = partialState.call( publicInstance, currentState, //这里确保每次的state都是当时最新的 publicInstance.props, ); } // Null and undefined are treated as no-ops. if (partialState === null || partialState === undefined) { return; } this._renderer._newState = { ...currentState, ...partialState, }; this._renderer.render(this._renderer._element, this._renderer._context); } }
/react/src/renderers/shared/stack/reconciler/ReactUpdates.js
function enqueueUpdate(component) { ensureInjected(); // Various parts of our code (such as ReactCompositeComponent's // _renderValidatedComponent) assume that calls to render aren't nested; // verify that that's the case. (This is called by each top-level update // function, like setState, forceUpdate, etc.; creation and // destruction of top-level components is guarded in ReactMount.) if (!batchingStrategy.isBatchingUpdates) {// 还是根据isBatchingUpdates batchingStrategy.batchedUpdates(enqueueUpdate, component); return; } dirtyComponents.push(component); if (component._updateBatchNumber == null) { component._updateBatchNumber = updateBatchNumber + 1; } }
