react 学习笔记（一）

react-hot-loader 局部热更新与webpack 热更新分析：

webpack-dev-server 的热加载是开发人员修改了代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement 热加载插件

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

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

2.redux 分析

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

const state = reducer(1, {
  type: 'ADD',
  payload: 2
});
上面代码中，reducer函数收到名为ADD的 Action 以后，就返回一个新的 State，作为加法的计算结果。其他运算的逻辑（比如减法），也可以根据 Action 的不同来实现。

推荐redux 莞式教程，很清晰https://github.com/kenberkeley/redux-simple-tutorial

父子组件传值（react 父子组件通信）：

父组件给子组件传值

　　1.在调用子组件的时候定义一个属性 <Header title={this.state.msg}></Header> ----------子组件使用方式this.props.msg 获取到父组件传下来的数据

　　2.父组件给子组件传入一个方法

　　　　父组件定义：<Header method={this.method}> 子组件中获取父组件中的方法： <button onClick={this.props.method}>调用父组件的方法</button>

　　3. 父组件可以将自己传给子组件 <Header father={this}></Header> ------>子组件通过 this.props.father.XX获取数据或者方法

　　　　　　　　　　　　　　　　　 ^　　^　　^　　^　　^

　　　　　　　　　　　　　　　　　　||　　||　　||　　||　　||
说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。

父组件主动获取子组件的数据

　　1、父组件调用子组件的时候指定ref的值 <Header ref='header'></Header>

　　2、父组件通过this.refs.header 获取整个子组件实例 (dom（组件）加载完成以后获取 )

校验值类型： defaultProps propsTypes

defaultProps:父子组件传值中，如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值

propTypes：验证父组件传值的类型合法性

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

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

　　3.类.defaultProps={

　　name:

}

注意：两者都是定义在子组件里面

react中循环出数据

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

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

条件渲染

　　描述：根据组件的状态，只渲染组件中的一部分，我们可以像在JavaScript中写条件语句一样地写条件渲染语句：这里我只介绍使用变量存储元素和函数来render ，将不介绍 &&运算符和三目运算符这些常用到的

//使用变量来存储元素
function Component (props){

var button;

　　const isState = props.isState;

　　if (isState) {

　　　　button = <button>退出</button>

　　} else {

　　　　button = <button>登陆</button>

　　}

　　return <div>你可以{button}</div>;

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

//阻止组件渲染，有时候我们需要等到有指定的值时，渲染指定的组件，而不造成组件切换闪动的情况，我么你可以通过在render函数中返回一个null,来实现我们逍遥的效果
<Component1 />
<Component2 /> // 1 2 是两个组件

state={
isfalse:false
}

Component=()=>{

　　const { getData } = this.props //请求返回的数据，未返回 undefind 返回则有数据

　　const { isfalse } = this.state

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

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

react 学习笔记（一）

猜你喜欢