state

import React from 'react';
import './Square.css'
export class Square extends React.Component {

constructor(props) {
    super(props);
    //state 只能在构造函数里面赋值；
    this.state = {
        date: new Date(),
    }
    
}

changeDate=()=>{
    let date = this.state.date;
    date.setDate(date.getDate()-1);
    //state 非构造函数里面只能改变值
    this.setState({
        date    //es6解构赋值
    })
}

render() {
    let date = this.state.date;
    let dateString = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
    return (
        <div>
            <h1 onClick={this.changeDate}>{dateString}</h1>
        </div>
    );
  }
}

props

父组件变量

 import React from 'react';
 import Square from './game/Square';
 import './App.css';

 export default class App extends React.Component {

 constructor(props) {
  super(props);
  this.state = {
  user: { id: 1, name: '张三', age: 11 }
  }
  this.changeUser = this.changeUser.bind(this);
}

changeUser(age) {
  let user = this.state.user;
  user.age += user.age;
  this.setState({
    user
  })
}

render() {
let user = this.state.user;
return (
    <div>
      {<Square id={user.id} name={user.name} age={user.age} change={this.changeUser} key={user.id}></Square>}
    </div>
  );
  }
}

import React from 'react';
import './Square.css'
import PropTypes from 'prop-types'

export default class Square extends React.Component {

//props 类型限定
static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    change: PropTypes.func
}

//props 默认值
static defaultProps = {
    name: '李白',
    age: 999
}

render() {
    let info = this.props;
    return (
        //table需要使用这种标签来避免jsx和浏览器生成的不一致情况。
        <>
            <div onClick={info.change}>
                姓名：{info.name}，年龄：{info.age}
            </div>
        </>
    );
  }
}

refs

父组件调用子组件函数

function App() {
  const names = ['jquery', 'angula', 'vue', 'react'];
  // const ref = React.createRef();
  let file  = null;
  return (
    <div className="App">
      <p>name:</p>
      <ul>
        {
          names.map((v,index) =>(<li className="li" key={index} onClick={()=>{file.submit()}}>{v}</li>))
        }
      </ul>
      <Square ref={res=>file = res} value={'zhang'} children={<div className="youtume" >你好</div>}></Square>
    </div>
   );
}

import React from 'react';
import PropTypes from 'prop-types'
import './Square.css'
export class Square extends React.Component {

//class静态语法,详见[链接](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/static)

static defaultProps = {
    value: 'lisi'
};
static propTypes = {
    value: PropTypes.string
}
constructor(props) {
    super(props);
    this.state = {
        status: false,
        date: new Date(),
    }
    this.submit.bind(this);
}
 componentDidMount() {
    this.tiemId = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
    clearInterval(this.tiemId);
}
tick() {
    this.setState({
        date: new Date()
    })
}
//保持this指向;class默认this指向为undefned
setStatus = () => {
    this.setState({
        status: !this.state.status
    })
}
submit() {
    const date = 5;
    console.error('开始上传');

    let interval = setInterval(() => {
        console.count('上传中...')
    },1000)

    let time = setTimeout(() => {
        console.error('上传结束')
        clearTimeout(time);
        clearInterval(interval);
    }, (date)*1000);
}
render() {
    return (
        <div>
            <button onClick={this.setStatus}>{this.state.status ? '我' : '你'}</button>
            <h1>{this.state.date.toLocaleTimeString()}</h1>
            <h1>{this.props.children}</h1>
            <h1>{this.props.value}</h1>
        </div>
    );
  }
}