1. The parent can pass the parameter to the child through… Extend the operator to pass

Const Settings = {dots: true, // arrow: false, // slidesToShow: 1, // display a swipeToSlide: Autoplay: true}; <Slider test="test" {... Settings}></Slider> Under Slider, use the this.props method to view all properties passed to the children (if The React plugin is installed, the elements can be viewed). True dots: true... ...Copy the code

2. The bindActionCreators method in the Return of mapDispatchToProps

Example: loadDiscounts and loadLikes are in homeActions

export const actions = { loadLikes: ()=>{ return (dispatch, getState) => { const {pageCount} = getState().home.likes; const rowIndex = 1 const endpoint = url.getProductList(); The return dispatch ({type: "..." , the endpoint,... }); }}, loadDiscounts: () = > {return (dispatch, getState) = > {........................... }; }}Copy the code
import { bindActionCreators } from "redux"; Import {actions as homeActions} from "…………" ; componentDidMount() { this.props.homeActions.loadDiscounts(); } fetchMoreLikes = () => { this.props.homeActions.loadLikes() } const mapDispatchToProps = dispatch => { return { homeActions: bindActionCreators(homeActions, dispatch) }; }; export default connect( null, mapDispatchToProps )(Home);Copy the code

3. Handle screen scrolling events to achieve more loading effects

  • This is a component scroll content, a component by itself
handleScroll = () => { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; / / how many distance rolling const screenHeight = document. The documentElement. ClientHeight; // The height of the viewable area of the current page window includes the padding but excludes the height of the border, horizontal scrollbar, and margin elements. For the inline elements, this property has been 0, px unit const likeListTop = this. MyRef. Current. The offsetTop; / / the current components to the distance at the top of the page const likeListHeight = this. MyRef. Current. OffsetHeight; // Include padding, border, horizontal scroll bar, but not margin. For inline elements, this property is always 0. Px if(scrollTop + 60 >= likeListHeight + likelisttop-screenheight){this.props. } } render(){ return ( <div ref={this.myRef}></div> ) }Copy the code
  • Scrolling content does not pull out into a single component
HandleScroll () {if (this.state.menuIndex! = 0) return; / / the scroll bar rolling distance const scrollTop = this. MyRef. Current. The scrollTop; The actual height / / document content (including overflow section) is out of the Windows const scrollHeight = this. MyRef. Current. ScrollHeight; / / window visible and highly const screenHeight = this. MyRef. Current. ClientHeight; If (screenHeight + scrollTop + 200 >= scrollHeight) {this.onloadMore ()}} render(){return (<div> <div/>... < div ref = {this. MyRef} >... < / div >... ... </div> ) }Copy the code

4. The use of the story – the actions

[the official documentation] redux-actions.js.org/introductio…). CreateAction The function used to create the action creator

// action.js import { createAction } from "redux-actions" const increment = createAction("INCREMENT"); Increment () {type: 'increment'} increment("100") {type: 'increment ', payload: 100}Copy the code

createAction(type, payloadCreator, metaCreator)

const updateAdminUser = createAction(
  'UPDATE_ADMIN_USER',
  updates => updates,
  () => ({ admin: true })
);

updateAdminUser({ name: 'Foo' });
// {
//   type: 'UPDATE_ADMIN_USER',
//   payload: { name: 'Foo' },
//   meta: { admin: true },
// }
Copy the code

The handleActions function is used to handle multiple actions (handleActions can also be handled but only one).

// reducer.js import {handleActions} from 'redux-actions'; import {INCREMENT} from './action' const reducer = handleActions({ INCREMENT: (state, action) => ({ counter: state.counter + action.payload }), DECREMENT: (state, action) => ({ counter: state.counter - action.payload }) },{ counter: 0 }); Usage: handleActions(reducerMap, defaultState) => In the reducerMap, key is the action name and value is the reducerCopy the code

5.React method for obtaining DOM nodes

  • React.createRef()
this.state={ this.cont = React.createRef(); } componentDidMount() { this.cont.current.addEventListener("scroll", this.handleScroll); } render() {<div ref={this.cont}>... ... </div>} // 'scroll' should be used instead of 'touchmove'?Copy the code
  • Ref ={} is returned by a function
ComponentDidMount () {this. Cont. GetBoundingClientRect (). The width / / this. Cont get DOM node / / this. Cont. Focus (); // getBoundingClientRect() = {x: 112.625 y: 44 width: 32 height: 44 top: 44 right: Render () {<div ref={r => {this.cont = r}}> render() {<div ref={r => {this.cont = r}}>...... </div> }Copy the code
  • Ref =”” can also assign a string directly
componentDidMount(){ this.refs.cont.getBoundingClientRect().width const myCount = this.refs.cont const dom = ReactDOM.findDOMNode(myCount); Render () {<div ref="cont"}>... </div>} // this.refs.mycount.method (), but this is not recommended.Copy the code

6.React can also use a link to jump to the page, XXXX? A is equal to b&C is equal to d

  • Demand is the page and A page to B in B page by clicking on the TAB to switch the content, but not when you use the refresh the page and click on the label B, B page URL parameters, click on the TAB to follow along with the corresponding change, because it is possible from B to C pages, pages back page B, C to grab B page URL parameter changes for the last time.
  • ] Ruoyu of the Valley of hungry People

]zhuanlan.zhihu.com/p/22412047)

// Change the URL parameter value without refreshing the page history.pushState({URL: '/#/B? shopId=' + shopId + '&type=2', title: document.title }, docume.title, "/#/B? ShopId =" + shopId + "&type=2") history.pushState() takes three parameters: a status object, a title (now ignored), and an optional URL address. 1. The state object is a history-related JS object created by the pushState() method. 2. Title - This parameter is now ignored by Firefox and may be used in the future. It is safe to pass an empty string, given possible future changes. Of course, you can pass a short title to the state you want to transition to. 3.URL - This parameter provides the address of the new history. Note that the browser does not load the URL after calling the pushState() method, but it may do so later, such as after the user restarts the browser. The new URL can be an absolute or relative address. The new URL must be in the same source as the current URL.Copy the code
Const data = {URL: null, params: {}}; // parseUrlHash = ()=>{const data = {URL: null, params: {}}; let hash = location.hash; let paramsString, pair; if (String.isNotEmpty(hash)) { hash = hash.replace("#/", "").split("?" ); data.url = hash[0]; if (hash.length >= 2) { paramsString = hash[1].split("&"); for (var i = 0; i < paramsString.length; i++) { pair = paramsString[i].split("="); data.params[pair[0]] = pair[1]; } } } return data; }Copy the code

7. When writing React with less, use calc() to calculate the width and height incorrectly. This problem did not occur when writing React with SCSS

“Gulp – sass” : “^ 3.1.0”,

Height :calc(100%-0.38rem) //Copy the code

“Less” : “^ 2.7.3,” “less – loader” : “^ 4.0.5” = > made H5 react

@ TAB - the header - height: 0.45 rem; @ TAB - second - height: 0.6 rem; Height: calc(~'100% -' @header-height ~'-' @tab-header-height ~'-' @tab-second height); /* Less */ #main{width:~'calc(300px-30px)'; } /* Generated CSS */ #main{width:calc(300px-30px); } structure: ~' value 'to avoid compilation sometimes encountered calc() after the calculation of the result into a percentage. For example, cACL (100%-580px) will change to CALC (-480%). This error occurs with less. The calculation method of LESS conflicts with CALC. Solution: calc(~ "100%-580px")Copy the code

conclusion

React QQ group:788023830 —- React/Redux - Old underground hero

Front-end COMMUNICATION QQ group:249620372 —- FRONT - END - JS FRONT END

(Our mission is, for overtime, for baldness… , look up to the big guy), I hope friends to study together