react第七单元(组件的高级用法-组件的组合（children的用法）-高阶组件-封装组件)

第七单元(组件的高级用法-组件的组合（children的用法）-高阶组件-封装组件)

#受控组件

简而言之，就是受到状态state控制的表单，表单的值改变则state值也改变，受控组件必须要搭配onchange方法，否则不能使用

class App extends Component{
  state={
    text:''
  }
  control=(e)=>{
    this.setState({text:e.target.value})
  }
  render(){
    const{text} = this.state;
    return <div>
      <input type="text" value={text} onChange={(e)=>{this.control(e)}}/>
      <p>{text}</p>
    </div>
  }
}
export default App

 

#高阶组件

#1 首先回顾一下什么是高阶函数

高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回。

function a( functionName ){
    functionName()
}

function b(){
    console.log('b')
}

 a(b)

// a为一个高阶函数

 

#2 高阶组件

高阶组件是一个组件，它接收组件作为参数，并将组件作为输出返回

class Small extends Component{
  render(){
    return <h1>{this.props.text}</h1>
  }
}

//高阶组件
function High(Group){
  class Height extends Component{
    render(){
      return <div>
              <Group {...this.props}/>
      </div>
    }
  }
  return Height
}
//此时的small 经过进化已经不是原来的Small组件了
Small = High(Small);

class App extends Component{
  state={
    text:'高阶组件'
  }
  render(){
    return <div>
      <Small text={text}/>
    </div>
  }
}

 

#children

在组件传值时，不光可以传递变量，函数，也可以传递标签,通常我们使用两种方式传递标签: 1 通过属性传递标签,子组件接收时使用this.props

class Text extends Component{
  render(){
    return <div>{this.props.hHtml}</div>
  }
}

class App extends Component{
  render(){
    return <div>
        <Text hHtml={<h1>helloworld</h1>}/>
    </div>
  }
}

 

2 将组件写成双标签，包住要传递的标签,子组件接收时使用this.props.children

class Text extends Component{
  render(){
    return <div>{this.props.children}</div>
  }
}

class App extends Component{
  render(){
    return <div>
        <Text>
            <h1>helloworld</h1>
        </Text>
    </div>
  }
}