React16学习笔记（三）-------Props/State/Forms属性/状态/表单和生命周期

React的属性/状态/表单和生命周期

一、Props（属性）

• 组件像一个函数一样，接受特定的输入（props），产出特定的输出（React elements）
• V=f（props）

eg:属性Props实例-一张名片

1. 安装bootstrap样式

npm install bootstrap --save

2. 在index.js中引入bootstrap

// 引入bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

3. 新建components文件夹存放组件，NameCard.js引入依赖

import React from 'react'


class NameCard extends React.Component{
    render(){
        const { name, number,isHuman,tags} = this.props
        return(
            <div className="alert alert-success">
            <h4 className="alert-heading">{name}</h4>
            <ul>
                <li>电话：{number}</li>
                <li>{isHuman ? '人类' : '外星生物'}</li>
                <p>
                    { tags.map((tag,index) => (
                        <span className="badge badge-pill badge-primary " key={index}>{tag}</span>
                    ))}
                </p>
            </ul>
        </div>
        )
    }
}

export default NameCard

4. App.js中引入components

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NameCard from './components/NameCard';

const tags=['好','很好']
class App extends Component{
  
  render(){
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcom to React</h1>
        </header>
       <NameCard name="lili" number={12334} isHuman tags={tags}/>
     </div>
     );
  }   
}

export default App;

5. 函数式写法

import React from 'react'

// 使用函数式写法
const NameCard = (props) =>{
    const { name, number, isHuman, tags} = props
    return(
        <div className="alert alert-success">
            <h4 className="alert-heading">{name}</h4>
            <ul>
                <li>电话：{number}</li>
                <li>{isHuman ? '人类' : '外星生物'}</li>
                <p>
                    { tags.map((tag,index) => (
                        <span className="badge badge-pill badge-primary " key={index}>{tag}</span>
                    ))}
                </p>
            </ul>
        </div>
    )
}
export default NameCard

6. 效果展示
   

二、State（状态）

• 组件内部的数据可以动态改变
• this.setState()是更新state的唯一途径

eg:State实例-点赞按钮

1. components下新建LikesButton.js

import React from 'react';

class LikesButton extends React.Component{
    // 接收参数
    constructor(props){
        // 硬性要求调用，继承类的方法
        super(props)
        this.state = {
            likes : 0
        }
    }
    render(){
        return (
            <div className="Likes-button-component">
               <button 
                    type="button" 
                    className="btn btn-outline-prmary btn-lg">
                        <span className="glyphicon glyphicon-thumbs-up" aria-hidden="true"/>
                        {this.state.likes}
                    </button>
            </div>
        )
    }
}

export default LikesButton

3. App.js文件引入

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NameCard from './components/NameCard';
import LikesButton from './components/LikesButton';
const tags=['好','很好']
class App extends Component{
  
  render(){
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcom to React</h1>
        </header>
       {/* <NameCard name="King" number={12334} isHuman tags={tags}/> */}
       {/* 引入LikeButton */}
       <LikesButton />
     </div>
     );
  }   
}

export default App;

4. 效果图
   
5. 点击点赞按钮增加次数
   • 采用驼峰式命名onClick传入函数处理
   • 创建传入的函数
   • this没有进行绑定回调函数，需要手动绑定
     方法一：this.increaselikes = this.increaselikes.bind(this)
     方法二：使用箭头函数 onClick={()=>{this.increaselikes()}}
   • 调用this.state方法，实现likes值加一

import React from 'react';

class LikesButton extends React.Component{
    // 接收参数
    constructor(props){
        // 硬性要求调用，继承类的方法
        super(props)
        this.state = {
            likes : 0
        }

        // 方法一：手动绑定
        this.increaselikes = this.increaselikes.bind(this)
    }
    increaselikes(){
        // this没有进行绑定回调函数，需要手动绑定;
        //修改State值的唯一方法
        this.setState({
            likes:++this.state.likes
        })
    }
    render(){
        return (
            <div className="Likes-button-component">
               <button 
                    type="button" 
                    className="btn btn-outline-prmary btn-lg"
                    // 绑定事件
                    // onClick={this.increaselikes}
                    onClick={()=>{this.increaselikes()}}
                >
                        <span className="glyphicon glyphicon-thumbs-up" aria-hidden="true"/>
                        {this.state.likes}
                    </button>
            </div>
        )
    }
}

export default LikesButton

三、生命周期

• 组件初始化：一个组件从开始到DidMount dom节点的过程
• 组件更新：调用State之后从开始到组件更新完毕之后的过程
• 组件卸载：一个组件从dom节点上卸载的过程
• React生命周期图解
  

eg:生命周期实例-电子钟表

1. 需求分析：初始化显示当前时间，组件添加定时器，每一秒更新到当前时间，组件销毁时要销毁定时器
2. 在components文件里新建DigitalClock.js文件

import React from 'react';

class DigitalClock extends React.Component{
    constructor(props) {
        super(props)
        this.state = {

            //指向当前时间
            date : new Date()
        }
    }
    render() {
        return(
            <div className="digital-clock-component jumbotron">
            <h1>{this.state.date.toLocaleTimeString()}</h1>
            </div>
        )
    }
}

export default DigitalClock

3. 在App.js中引入

  import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import DigitalClock from './components/DigitalClock';

  class App extends Component{
    render(){
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcom to React</h1>
          </header>
        <DigitalClock/>
      </div>
      );
    }   
  }

  export default App;

4. 在组件Mount之后添加定时器
   – componentDidMount()
5. 加载之后卸载定时器
   – componentWillUnmount()

import React from 'react';
class DigitalClock extends React.Component{
    constructor(props) {
        super(props)
        this.state = {

            //指向当前时间
            date : new Date()
        }
    }
    //添加定时器
    componentDidMount() {
        this.timer = setInterval(()=>{
            this.setState({
                date : new Date()
            })
        },1000)

    }
    // 卸载定时器
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    render() {
        return(
            <div className="digital-clock-component jumbotron">
            <h1>{this.state.date.toLocaleTimeString()}</h1>
            </div>
        )
    }
}

export default DigitalClock

6. 扩展
   – componentDidUpdate(props,state)使用讲解
   传入两个参数，实时更新的props和实时更新的state

  componentDidUpdate(currentProps, currentState){
        console.log(currentState)
    }

7. 效果图
   

四、Forms（表单）

• 表单元素和其他DOM元素存在区别
• Controlled Components -受控组件

eg:表单实例-留言板

1. 需求分析
   输入留言内容后点击回车或者提交按钮弹出留言框里内容
2. 在components文件里新建ComponentBox.js文件

import React from "react";

class ComponentBox extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            value : ''
        }
    }

    render(){
        return(
            <form className="p-5">
                <div className="form-group">
                    <label>留言内容</label>
                    <input
                        type="text"
                        className="form-control"
                        placeholder="请输入内容"
                        value={this.state.value}
                    />
                </div>
                <button type="submit" className="btn btn-primary">留言</button>
            </form>
        )
    }
}

export default ComponentBox

4. 在App.js中引入ComponentBox

  import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import ComponentBox from './components/ComponentBox';
  class App extends Component{
    render(){
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcom to React</h1>
          </header>
        <ComponentBox/>
      </div>
      );
    }   
  }
  export default App;

5. 将静态页面改为交互页面
   – 受控组件onChange
   弊端：使用繁琐，为数据变化的美一种方式编写一个事件

import React from "react";

class ComponentBox extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            value : ''
        }
        this.handChange = this.handChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleSubmit(event){
        alert(this.state.value)
        // 防止跳转
        event.preventDefault()
    }
    handChange(event){
        this.setState({
            value: event.target.value
        })
    }
    render(){
        return(
            <form className="p-5" onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label>留言内容</label>
                    <input
                        type="text"
                        className="form-control"
                        placeholder="请输入内容"
                        onChange={this.handChange}
                        value={this.state.value}
                    />
                </div>
                <button type="submit" className="btn btn-primary">留言</button>
            </form>
        )
    }
}

export default ComponentBox

6. 使用受控组件
   – ref

import React from "react";

class ComponentBox extends React.Component{
    constructor(props) {
        super(props)
        this.handleSubmit = this.handleSubmit.bind(this)
    }


    handleSubmit(event){
        alert(this.textInput.value)
        // 防止跳转
        event.preventDefault()
    }


    render(){
        return(
            <form className="p-5" onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label>留言内容</label>
                    <input
                        type="text"
                        className="form-control"
                        placeholder="请输入内容"
                        // 非受控组件
                        ref={(textInput) => {this.textInput = textInput}}
                    />
                </div>
                <button type="submit" className="btn btn-primary">留言</button>
            </form>
        )
    }
}

export default ComponentBox