React经典入门代码

ES引入1

index.js文件
// 引入文件
export {default as MicroStart } from './x'

----------------
import { MicroStart } from './../xxxx'

const { registerMicroApps, start }= MicroStart

ES引入2

index.js文件
// 暴露Loading方法
export * as loading from './loading'

-------

import { loading } from '../store'

import ReactDOM ,{c} from 'react-dom'; //{c}是属性, 相当于xxx.c

const { name, age } = props; //ES6 //解构是对象的选择赋值

理解:export

第一个

import React from 'react';
import ReactDOM from 'react-dom';
​
const Headline = () => {
  return <h1>Welcome to React world.</h1>;
}
​
const Greeting = (props) => {
  return <p>You will love it {props.name} ({props.age})!</p>;
}
export const App = () => {
  return (
    <div>
      <Headline />
      <Greeting name="John" age={25} />
    </div>
  )
}
var mount = document.querySelector('#root');
ReactDOM.render(<App />, mount);

第二个

使用解构 const { name, age } = props; //ES6

import React from 'react';
import ReactDOM ,{c} from 'react-dom';
//{c}是属性, 相当于xxx.c
const Headline = () => {
  return <h1>Welcome to React world.</h1>;
}
​
const Greeting = (props) => {
  const { name, age } = props;  //ES6 //解构是对象的选择赋值
  return <p>You will love it {name} ({age})!</p>;
}
export const App = () => {
  return (
    <div>
      <Headline />
      <Greeting name="John" age={25} />
    </div>
  )
}
​
​
var mount = document.querySelector('#root');
ReactDOM.render(<App />, mount);

第三个

类型检查

建立一个

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
​
const Headline = () => {
  return <h1>Welcome to React world.</h1>;
};
​
const Greeting = props => {
  const { name, age } = props; //ES6
  console.log();
  return (
    <p>
      You will love it {name} ({age})!
    </p>
  );
  
};
export const App = () => {
  return (
    <div>
      <Headline />
      <Greeting name="John" age={25} />
    </div>
    
  );
};
​
Greeting.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired
};
​
var mount = document.querySelector("#root");
ReactDOM.render(<App />, mount);

第四个

纯函数 封装组件

import React, { Component } from 'react';
...
​
class A extends Component {
  constructor(props) {
   ...
  }
​
  componentDidMount() {
...
  }
​
  render() {
...
​
​
    const IconText = ({ type, text }) => (
      <span>
          <Icon type={type} style={{ marginRight: 8 }} />
        {text}
     </span>
    );
    return (
      <div>
        <List
          ...
          renderItem={item => (
            <List.Item
              key={item.title}
              actions={[<IconText type="star-o" text="156" />, <IconText type="like-o" text="156" />, <IconText type="message" text="2" />, <IconText type="message" text={item.addr} />,  <IconText type="message" text={moment(item.createtime).fromNow()} />]}
            >
           ...
            </List.Item>
          )}
        />
      </div>
    );
  }
}
​
export default A;

使用纯函数简化代码

> props     props.children

CardComponent , 作为容器组件 , 可接收参数   (title    children ),   将CardComponent   作为容器模板进行渲染页面, 简化代码

const CardComponent = (props) => {
  return <Col {...topColResponsiveProps}>
    <Card
      bordered={false}
      title={<div style={{ fontWeight: 'bold' }}>{props.title}</div>}
      bodyStyle={{ height:150,textAlign: 'center' }}
    >
      {props.children}
    </Card>
  </Col>;
};
===========
        <CardComponent  title='工单总数'>
            <Statistic
              value={statisdata}
              valueStyle={{ color: '#3f8600' }}
              prefix={<Icon type="arrow-up"/>}
              suffix="条"
            />
          </CardComponet>

        <CardComponent  title='专家总数'>
            <Statistic
              value={statisdata}
              valueStyle={{ color: '#3f8600' }}
              prefix={<Icon type="arrow-up"/>}
              suffix="条"
            />
          </CardComponet>

第五个

封装组件为方法 ,调用组件

原理： 在ue组件中创建监听selectionchange事件，并且在事件中调用从父组件继承的回调函数，来及时响应到父组件中。

1.Ue组件：

import React, { Component, PropTypes } from 'react';
​
class Ueditor extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        this.editor = this.initEditor()
    }
    componentWillUnmount() {
        // 组件卸载后，清除放入库的id
        UE.delEditor(this.props.id);
    }
​
    changeContent(text) {
        this.editor.setContent(text || '');
    }
​
    initEditor() {
        const id = this.props.id;
        const ueEditor = UE.getEditor(this.props.id, { /*这里是配置*/ });
        const self = this;
        ueEditor.ready((ueditor) => {
            if (!ueditor) {
                UE.delEditor(id);
                self.initEditor();
            }
        });
        //监听用户输入，用于及时及时反馈，事件中调用父组件的callback回调函数
        let me = this;
        ueEditor.addListener('selectionchange', function(type) {
            me.props.callback(this.getContent());
        });
        return ueEditor;
    }
    render() {
        return (
            <div id={this.props.id} name="content" type="text/plain"></div>
        )
    }
}
export default Ueditor;

2.父组件回调函数

<Ueditor id="content" height="200" ref="ueditor" callback={(content) => this.handleUeditorContent(content,this.state.currentSelectionIndex)}/>