React使用模板

//1.function方式组件
function MyAddress(props) {
    return <h1 style={MyStyle}>第一个function组件：{props.parameter1}</h1>
 }
 
 function MyName(props) {
    return <h1 style={MyStyle}>第二个function组件：{props.parameter2}</h1>
 }
 
 const MyStyle = {//添加样式
    color: "blue"
 }
 
 
 
 //最后：渲染引擎ReactDOM.render
 ReactDOM.render(
 
    <div>
    //标签方式引用组件，并props传递参数
    <MyAddress parameter1="[这是=props1参数传递]"/>,
    <MyName parameter2="<这是=propos2参数传递>"/>,
    </div>,
    document.getElementById('example')
 );
 
 
 
 -----------------------------------------------------------------------
 
 
 
 //Class组件（state）：必有extends，render，return！！！
 class WebSite extends React.Component {
    constructor() {//初始化构造器
        super();//指父级
        this.state = {//指此插件.状态参数state
            name: "菜鸟教程"
        }
    }
    render() {//组件级渲染
        return (
            <div>
                 
                <Name name={this.state.name} />
            </div>
        );
    }
 }
 //嵌套组件
 class Name extends React.Component {
    render() {
        return (//this.props.实际渲染时传入参数，可以直接点出（<Name name={this.state.name} />）
            <h1>{this.props.name}</h1>
        );
    }
 }
 
 ReactDOM.render(
    <WebSite />,
    document.getElementById('example')
 );
 
 
 
 -----------------------------------------------------------------------
 
 
 
 class TextButton extends React.Component {
        constructor() {//初始化构造器
            super();//指父级
            this.update = this.update.bind(this);//构造器内部指定.bind(this)
        this.state = {//指此插件.状态参数state
            p1: "传递点击按钮事件参数this.state.p1"
        }
    }
 
    update() {//构造器内部指定.bind(this)
        this.props.onChange('小明名字改了')//DoSomeThing
    }
 
    // 这个语法确保了 `this` 绑定在  handleClick 中
    handleClick = () => {//定义一个按钮点击触发的函数
        alert(this.state.p1);
    }
 
    render() {
        return (
            <button onClick={this.handleClick}>
                Click me
            </button>
        );
    }
 }
 
 ReactDOM.render(
    <TextButton />,
    document.getElementById('example')
 );
 
//  表单
//  onchange配合value
 class Child extends React.Component {
    state = {
        name: '小明'
    }
 
    constructor(props) {
        super(props)
        this.update = this.update.bind(this)
    }
 
    update(e) {
        this.setState({
            name: e.target.value
        })
    }
 
    render() {
        return (<div>
            <input onChange={this.update} value={this.state.name} />
        </div>)
    }
 }
 ReactDOM.render(
    <Child />,
    document.getElementById('example')
 );
 
 
 
 
 
 

生命周期函数

import React, { Component } from 'react';

class TestCpn extends Component {
  render() {
    return <h2>TestCpn</h2>
  }
  componentWillUnmount() {
    console.log("组件卸载完成 ----- TestCpn componentWillUnmount");
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }
    console.log("调用constructor方法");
  }

  render() {
    console.log("调用render方法")
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        {/* this.state.counter > 5, 卸载TestCpn组件 */}
        {this.state.counter <= 5 && <TestCpn/>}
        <button onClick={e => this.increment()}>+1</button>
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  componentDidMount() {
    console.log("组件挂载完成 ----- 调用componentDidMount方法");
  }

  componentDidUpdate() {
    console.log("更新数据完成 ----- 调用componentDidUpdate方法");
  }

  componentWillUnmount() {
    console.log("组件卸载完成 ----- 调用componentWillUnmount方法");
  }
}

Function函数组件挂载

import React, { useState, useEffect } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () =>
    setCount(currentCount => currentCount + 1);

  const handleDecrement = () =>
    setCount(currentCount => currentCount - 1);

  useEffect(() => setCount(currentCount => currentCount + 1), []);

  return (
    <div>
      <h1>{count}</h1>

      <button type="button" onClick={handleIncrement}>
        Increment
      </button>
      <button type="button" onClick={handleDecrement}>
        Decrement
      </button>
    </div>
  );
};

在组件中写判断逻辑

  <Col span={5}>
        { this.state.treeData.length > 0 &&//??????????这也行???灵异
          <Tree
            defaultExpandAll={true}
            showLine
            switcherIcon={<DownOutlined />}
            onExpand={this.onExpand}
            onSelect={this.onSelect}
            treeData={this.state.treeData}
            checkStrictly='true'
            multiple='true'
          />
        }
        </Col>