react 入门

JavaScript函数创建

• 函数名称必须为大写字母开头，React通过这个特点来判断是不是一个组件
• 函数必须有返回值，返回值可以是：JSX对象或null
• 返回的JSX，必须有一个根元素
• 组件的返回值使用()包裹，避免换行问题

class

在 React.Component 的子类中有个必须定义的 render()函数

• 1 它是用来定义类的，是ES6中实现面向对象编程的新方式
• 2 使用static关键字定义静态属性
• 3 使用constructor构造函数，创建实例属性

函数式组件 和 class 组件的使用场景说明：

• 1 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件
• 2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state

constructor

• 构造函数
• 作用：1 获取props 2 初始化state
• 说明：通过 constructor() 的参数props获取
• 1. constructor：如果在react中需要添加state默认值，或者绑定事件，需要写在constructor方法中。
• 2. super(props)：在这里调用super是因为在ES6中，子类的constructor中必须先调用super才能引用this，使用super(props)的目的是在constructor中可以使用this.props，因为我们这里Main虽然是一个子组件，但是却没有传参数给它所以不需要使用this.props调取父标签传递的参数，所以super(props)可以去掉。在什么样的情况一定需要：
     // 比如外标签是<Main name='testName'></Main>，那么在Main组件中的constructor中就可以通过this.props.name来获取。

class Home extends Component {
  render() {
    return (
      <div style={{background:'#0ff', fontSize:'20px', color:'#00f'}}>
        这是第一个demo
        <img src={logo} style={{width:'300px', height: '300px'}}/>
      </div>
    )
  }
}

变量的定义和初始化

class State extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: '一行白鹭上青天'
    };
  }
  render(){
    return (
      // 此处的注释
      <div style={{background: '#0ff', fontSize:'20px', color:'#00f'}}>
      {/* 此处的注释  必须要{}包裹 */}
        {this.state.data}
      </div>
    )
  }
}

在render 中创建

  class Rendercreated extends Component {
   render() {
     let data = 'js是世界上最好的语言';
     return(
       <div style={{background:'#0ff', fontSize:'20px', color:'#00f'}}>
         {data}
       </div>
     )
   }
}

事件的定义和使用

• 传参 onClick={()=>this.click(this.state.data)
• 修改变量 this.setState({ data: '121' })
• 自调用事件 onClick={this.click()}
• react对象继承自React.Component

class Event extends Component {
  // 实例的构造函数 constructor
  // 必须调用super(), super表示父类的构造函数
  constructor(props){
    super(props);
    this.state = {
      data: '事件的定义和使用'
    }
  }
  //class创建的组件中 必须有rander方法 且显示return一个react对象或者null
  render() {
    return (
      <div>
        <div style={{background:'#999', marginTop:'20px'}} onClick={()=> this.click()}>
          {this.state.data}
        </div>
        <button className="button" onClick={() => this.clickParams(this.state.data)}>带参数的事件</button>
        <button className="button" onClick={() => this.changeData()}>操作变量值</button>
        <button className="button" onClick={this.Zidiao('自调用事件，页面加载就自己执行')}>自调用事件</button>
      </div>
    )
  }

  click = ()=> {
    alert('点到了~');
  };

  clickParams = (data)=> {
    alert(data);
  };

  changeData = ()=> {
    let num = Math.random();
    this.setState({
      data: `你说的对啊~${num}`
    })
  };

  Zidiao = (data)=> {
    console.log(data);
  }

}

生命周期

1、组件的定义

什么是组件？当一个页面所需要呈现出的内容过多，如果我们将所有的页面写在同一个.js文件中，会显得代码比较乱，给往后的代码维护造成困难。所以我们在编写代码的过程中，将某些部分提取出来，写在另一个组件中，然后在主页面中引入这个组件。
组件实际上是代码封装的一种，我们可以将经常使用到的一些功能及样式封装成一个组件，然后只需要调用这个组件便能调用这些功能和样式。这样做既方便了代码的管理又增加了可维护性。

2、组件的生命周期

在学习组件之前，我们必须先掌握组件的生命周期。一个组件从最开始的引入到最后的消亡，形成一段特殊的生命历程。这个生命历程成为组件的生命周期。

生命周期函数 就是在组件运行的某一时刻会自动运行的一些函数

• （1）componentWillMount
  在组件DOM树渲染前调用。当进入这个组件时执行。

• （2）componentDidMount
  在组件DOM第一次渲染结束之后执行。

• （3）componentWillReceiveProps
  在组件接收到新的props时执行。
  当一个组件要从父组件接受了参数
  只要父组件的render函数被重新执行了， 子组件的这个生命周期函数就会被执行
  如果这个组件第一次存在于父组件中， 不会执行
  如果这个组件之前已经存在于父组件中，才会执行

• （4）shouldComponentUpdate
  在组件接收到新的props或则执行了this.setState()时执行，它会返回一个布尔值。

• （5）componentWillUpdate
  组件被更新之前， 它会自动执行， 但是它在shouldComponentUpdate 之后执行
  如果shouldComponentUpdate 返回true 它会被执行， 返回false 这个函数就不会被执行了

• （6）componentDidUpdate
  在组件完成更新后执行，比如执行this.setState()之后，组件进行刷新。首次渲染不会执行

• （7）componentWillUnmount
  在组件在DOM中移除，被销毁时执行

class Period extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: '生命周期'
    };
  }
  render() {
    return (
      <div styel={{marginTop:'20px', fontSize:'20px'}} onClick={() => this.click()}>
        {this.state.data}
        <a href="http://www.baidu.com">这是百度</a>
      </div>
    )
  }

  click = ()=> {
    this.setState = {
      data: '点击了生命周期'
    }
  };

  componentWillMount = ()=> {
    console.log('1.在组件DOM树渲染前调用。当进入这个组件时执行')
  };
  componentDidMount=()=>{
    console.log(2);
  };
  componentWillReceiveProps=()=>{
    console.log(3);
  };
  shouldComponentUpdate=()=>{
    console.log(4);
    return true;
  };
  componentWillUpdate=()=>{
    console.log(5);
  };
  componentDidUpdate=()=>{
    console.log(6);
  };
  componentWillUnmount=()=>{
    console.log(7);
  };

}

组件

class Componenta extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <hr/>
        <div style={{display:'inline-block'}}>一行白鹭上青天</div> 
        <MyScreen></MyScreen>
      </div>
    )
  }
}

一个新的组件同样具备完整的生命周期

class MyScreen extends Component {
  constructor(props){
    super(props);
    this.state = {
      data: '这是一段另一个组件引入的代码块'
    };
    console.log(this.props)
  }
  render() {
    return (
      <div style={{color: 'green', display:'inline-block'}} onClick={()=> this.click()}>
        {this.state.data}
        <p>父组件内容：{this.props.name}</p>
      </div>
    )
  }

  click = ()=> {
    console.log('这是一段另一个组件引入的代码块');
  }

}

组件之间传递数据

• 使用props来实现父子组件之间的数据传递
• props就相当于一个媒介，链接这两个组件之间的通道
• state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

class Propsdata extends Component{
  constructor(props){
    super(props);
    this.state = {
      parentData: '这是父组件的数据'
    }
  }
  render() {
    return (
      <div>
        <div style={{width:"100%",height:"300px",fontSize:"20px"}}>
          <div style={{width:"100%",height:"100px",backgroundColor:"#ff0"}}></div>
          <MyScreen name={this.state.parentData} />
          <div style={{width:"100%",height:"100px",backgroundColor:"#f0f"}}></div>
        </div>
      </div>
    )
  }
}

组件之间动态数据传递

class DynamicData extends Component {
  constructor(props){
    super(props);
    this.state = {
      parentData: '父组件的数据'
    };
  }
  render() {
    return (
      <div style={{marginTop: '20px'}}>
        <h3>动态数据传递</h3>
        <button className='button' onClick={()=> this.changeChildrenData()}>修改子组件数据</button>
        <ChildrenTemplate ref={ref => this.childrenRef = ref} data={this.state.parentData}/>
      </div>
    )
  }

  changeChildrenData = ()=>{
    console.log(this.childrenRef)
    this.childrenRef.setChildrenData(this.state.parentData + Math.random())
  }

}




class ChildrenTemplate extends Component {
  constructor(props){
    super(props);
    this.state = {
      data: '子组件的数据'
    };
  }
  render() {
    return (
      <div onClick={()=> this.click()}>
        {this.state.data}
      </div>
    )
  }

  //方法名和父组件的一致
  setChildrenData = (data)=> {
    console.log(data)
    this.setState({
      data: data
    })
  };

  click = ()=> {
    console.log('点击了');
  }

}

function Home(){
  return (
    <div>
      <State></State>
      <Rendercreated></Rendercreated>
      <Event></Event>
      <Period></Period>
      <Componenta></Componenta>
      <Propsdata></Propsdata>
      <DynamicData/>
    </div>
  )
}

export default Home