react study notes (a)

 

react-hot-loader webpack local heat and hot update update Analysis:

Thermal load webpack-dev-server that developers have changed the code has been packaged, refresh the entire page. The react-hot-loader will not refresh the entire page, it only replaces the modified code, so that the partial refresh the page. But it needs to rely webpack of HotModuleReplacement heat load plugins

import { AppContainer } from 'react-hot-loader'；

render(
<AppContainer>
　　<container/>
</AppContainer>,
app
);

2.redux analysis

defaultState 0 = const; 
const = the reducer (State = defaultState, Action) => { 
  Switch (action.type) { 
    Case 'the ADD': 
      return State action.payload +; 
    default: 
      return State; 
  } 
}; 

const the reducer State = ( . 1, { 
  type: 'ADD', 
  payload: 2 
}); 
the above code, after receipt of the reducer Action called ADD function, it returns a new State, as the calculation result of the addition. Other logical operations (such as subtraction), may also be implemented depending on the Action.

 Recommended redux Wando tutorials, very clear https://github.com/kenberkeley/redux-simple-tutorial

 

Sons pass component value (REACT Sons assembly communication):

Parent component subassembly to pass values

　　1. When a call subassembly defined attribute <Header title = {this.state.msg}> </ Header> ---------- subassembly use the acquired parent component this.props.msg passed down data

　　2. The parent component to pass a sub-assembly method   

　　　　Parent component definition: <Header method = {this.method}> subassembly acquisition method parent components: <button onClick = {this.props.method}> method call parent element </ button>

　　3. The assembly may be passed to their parent subassembly <Header father = {this}> </ Header> ------> sub-assembly or method of data acquisition by this.props.father.XX

　　　　　　　　　　　　　　　　　    ^　　^　　^　　^　　^

　　　　　　　　　　　　　　　　　　|| || || || ||
Description: parent component not only can pass values to the sub-components, sub-assemblies can also pass to the method, and the entire parent assembly passed subcomponents, allowing the parent component sub-assemblies to pass value.

 

The parent component of the initiative to obtain data subcomponents

　　1, when the parent component invokes the specified value ref subassembly of <Header ref = 'header'> </ Header>
 
　　2, parent component by acquiring an entire sub this.refs.header (DOM later retrieval (assembly) loaded) component instance

 

Check value Type: defaultProps propsTypes

defaultProps: Sons components by value, if invoked when the parent component sub-assemblies sub-assemblies not to pass value, you can use the default value defaultProps defined in the sub-assembly

propTypes: verify the legitimacy of the parent type passed by value component

　　1、引入import PropTypes from 'prop-types';

　　2,类.propTypes = {
　　　　name: PropTypes.string
　　　　};

　　3. .defaultProps = {class

　　name:

}

NOTE: Both are defined in the sub-assembly which

 

circulating the data react

constructor(props){
    super(props);
    this.state({
    list:[]
})
}

render(){
<ul>
{
    this.state.list.map(value,key){
      return <li key={key}>{value.title}</li>      
    }    
}
</ul>
}

 Conditions rendering

　　Description: According to the state assembly, only part of the rendering component, we can write conditions render statements like writing a conditional statement in JavaScript the same way: I will just introduce the use of variable storage elements and functions to render, will not introduce && operators and these ternary operator used to

// variable used to store the elements 
function Component (props) {

    was button;

　　const isState = props.isState;

　　if (isState) {

　　　　button = <button>退出</button>

　　} else {

　　　　button = <button>登陆</button>

　　}

　　return <div> you {button} </ div>;

}

render(){
　<div>
　　<Component isTrue={false}/>
　</div>
}

// prevent component rendering, sometimes we need to wait until there is a specified value, rendering the specified components, switching components without causing flashing situation, I can not you can return a null in the render function, to achieve our Happy effect 
<that Component1 /> 
<Component2 /> // 2. 1 is a two component 

State = { 
IsFalse: to false 
} 

the component = () => {

　　const {getData} = this.props // return the requested data is not returned in the return data undefind

　　const { isfalse } = this.state

　　if(getData){
　　　　if(isfalse{
　　　　　　return <Component1 />
　　　　}else{
　　　　　　return <Component2 />
　　　　}
　　}else{
　　　　return null
　　}
}

render(){
　<div>
　{this.Component()}
　</div>
}