react 组件

1. 函数组件（无状态组件）

import React, { Component } from 'react';

function App(){
  return(
    <div>
      <h2> 我是函数组件 </h2>
    </div>
  )
}

export default App; 

2. 类组件（有状态组件）

rcc 创建组件

import React, { Component } from 'react';

class App extends React.Component{
  render(){
    return(
      <div>
        <h2> 我是类组件 </h2>
      </div>
    )
  }
}
export default App; 

3. state

state 是组件对象最重要的属性, 值是对象(可以包含多个数据) ；
组件被称为"状态机", 通过更新组件的 state 来更新对应的页面显示(重新渲染组件)；

一旦状态被改变就会重新渲染页面

import React, { Component } from 'react';

class App extends Component {
  constructor(){
    super(...arguments)
    // 设置初始状态
    this.state = {
      isLikeMe: true
    }
  }
  handClick=()=>{
    // 获取初始状态并修改
    const isLikeMe = !this.state.isLikeMe;
    // 修改初始状态
    this.setState({
      isLikeMe
    })
  }
  render() {
    // 解构赋值获取状态值
    const {isLikeMe} = this.state
    return (
      <div>
          <h2 onClick= {this.handClick}> {isLikeMe?'我喜欢你': '你喜欢我'} </h2>
      </div>
    );
  }
}

export default App; 

4. props

通过props标签属性从组件外向组件内传递变化的数据

import React, { Component } from 'react';
import PropTypes from 'prop-types';


class People extends Component{
  // 设置默认值
  static defaultProps = {
    age: 22,
  }
  // 设置值的类型 和限制(PropTypes验证器)
  static propTypes = {
    name: PropTypes.string.isRequired
  }

  render(){
    console.log(this)
    return(
      <div>
        <ul>
          <li>姓名: {this.props.name}</li>  
          <li>年龄: {this.props.age}</li>
          <li>性别: {this.props.sex}</li>    
        </ul>        
      </div>
    )
  }
}


class App extends Component {
  render() {
    const p1 = {
      // name: 'doudou',
      // age:'18',
      sex: 'male'
    }

    const p2 = {
      name: '痘痘',
      age:19,
      sex: 'female'
    }

    return (
      <div>
        <People {...p1}></People>
        <People {...p2}></People>
      </div>
    );
  }
}

export default App;

5. ref

组件内的标签都可以定义 ref 属性来标识自己
回调函数： 参数为标签名，返回自定义名字作为获取的对象
<input type="text" ref={input => this.msgInput = input}/>

import React, { Component } from 'react';

class App extends Component {
  handClick = ()=>{
      alert(this.input.value);
  }
  handBlur = (ev)=>{
    alert(ev.target.value)
  }
  render() {
    return (
      <div>
        <input type='text' ref={input=>this.input=input}/>
        <button onClick = {this.handClick}> 点击获取值 </button>
        <input type='text'  onBlur={this.handBlur} placeholder='失去焦点获取值'/>
      </div>
    );
  }
}

export default App;

6. 组件通讯

方式一：
（1）共同的数据放在父组件上，特有数据放在自己组件内部（state）；

（2） 通过props传递数据只能一层一层传

（3） 一般数据：父组件传递给子组件，子组件接收数据； 函数数据：子组件传递给父组件，父组件接收数据

方式二：
安装 npm install pubsub-js --save
使用消息订阅发布

// 引入
import PubSub from 'pubsub-js' 

// 订阅消息（回调函数参数：名字，内容）
//  componentDidMount
PubSub.subscribe('delete', (msg, name)=> { });

// 发布消息
PubSub.publish('delete', data) //发布消息