Python: WEB开发-react

npm install #或者 $ npm i

.
├── .babelrc
├── .gitignore
├── index.html #测试时用的
├── jsconfig.json
├── LICENSE
├── .npmrc
├── package.json
├── README.md
├── src
│ ├── App.js
│ ├── AppState.js
│ ├── index.html #打包时用的
│ └── index.js
├── node_modules
│ ├── ...
├── webpack.config.dev.js
└── webpack.config.prod.js

$ npm run start 或 npm start

#package.json  start热加载选项--hot   --open 自动打开浏览器
  "scripts": {
    "test": "jest",
    "start": "webpack-dev-server --config webpack.config.dev.js --hot --inline --open",
    "build": "webpack -p --config webpack.config.prod.js"
  },

import React from 'react';
import ReactDom from 'react-dom';

class Root extends React.Component { 
    render() {
        return <div>Hello World</div>;
    }
}

ReactDom.render(<Root/>, document.getElementById('root'));

import React from 'react';
import ReactDom from 'react-dom';

class Root extends React.Component {
  // 定义一个state对象
  state = {domain: 'cici.com', host: 'www'} // 构造函数中定义state 
  render() { // render 用来呈现state或props值
    // this.state.host = 'python'; // 可以修改属性值
    // this.setState({host:'python'}); //不可对还在更新中的state使用setSate. state改变会继续引起render, 递归了
    //Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor).
    setTimeout(()=> this.setState({host:this.state.host + '*'}), 3000)
    console.log('Root render ~~~~')
    return <div>
      Welcome to {this.state.host}.{this.state.domain}
      <hr />
      </div>
  }
}

ReactDom.render(<Root />, document.getElementById('root'));

<Toggle name="school" parent={this} />

import React from 'react';
import ReactDom from 'react-dom';

class Toggle extends React.Component {
  state = { flag: true }; // 类中定义state 
  handleClick(event) {
    console.log(event.target.id);
    console.log(event.target === this);
    console.log(this);
    console.log(this.state);
    this.setState({ flag: !this.state.flag });
  }

  render() {/* 注意一定要绑定this onClick写成小驼峰 */
    return <div id="t1" onClick={this.handleClick.bind(this)}
      style={{backgroundColor:'white', margin: '10' + 'px'}}
    >
      点击这句话，会触发一个事件。{this.state.flag.toString()}<br />
      显示props<br />
      {this.props.name} : {this.props.parent.state.p1}{this.props.parent.state.p2}
      {this.props.children}
    </div>;
  }
}

class Root extends React.Component {
  // 定义一个对象 
  state = { p1: 'www.python', p2: '.org' }; // 构造函数中定义state
  render() {
    return (
      <div  style={{backgroundColor: '#f0f0f0'}}>
        <div>Welcome to {this.state.p1}{this.state.p2}</div>
        <br />
        <Toggle name="school" parent={this}>{/*自定义2个属性通过props传给Toggle组件对象*/}
          <hr />{/*子元素通过props.children访问*/}
          <span>我是Toggle元素的子元素</span>{/*子元素通过props.children访问*/}
        </Toggle>
      </div>);
  }
}

ReactDom.render(<Root />, document.getElementById('root'));

import React from 'react';
import ReactDom from 'react-dom';

class Sub extends React.Component {
  render() {// render 用来呈现state或props值
    return <div>sub content ++++</div>
  }
}

class Toggle extends React.Component {
  state = { flag: true }; // 类中定义state 

  handleClick(e) {
    console.log('toggle handle click ~~~~')
    // e.preventDefault(); // 阻止默认事件
    // console.log(e.target);
    // console.log(e.target.id);
    // console.log(this) //this 的坑
    this.setState({ flag: !this.state.flag });
    this.props.parent.setState({host: this.props.parent.state.host + '@'})
  }

  render() {// render 用来呈现state或props值
    console.log('Toggle render ~~~~')
    console.log(this.state, this.props)
    return <div id="toggle" onClick={this.handleClick.bind(this)}
      style={{backgroundColor:'white', margin: '10' + 'px'}}
    >
      我是子组件Toggle. Flag = {this.state.flag.toString()}
      <hr />
      子组件区域显示props = {this.props.school} - {this.props.parent.state.host}
      <div style={{width:'80%', border:'1px solid red'}}>
        Toggle的子元素显示区域: {this.props.children}
      </div>
    </div>
  }
}

class Root extends React.Component {
  state = { domain: 'cici.com', host: 'www' }; // 构造函数中定义state

  handleClick(e) {
    console.log('root click')
    this.setState({host:this.state.host + '*'})
  }
  render() {
    console.log('Root render ++++')
    return (
      <div  style={{backgroundColor: '#f0f0f0'}} 
      onDoubleClick={this.handleClick.bind(this)}>
        Welcome to {this.state.host}.{this.state.domain}
        <hr />
        <Toggle school='python' parent={this}>
          <div>toggle的子元素
            <div>cell</div>
          </div>
          <div>第二个子元素
            <Sub />
          </div>
        </Toggle>
      </div>);
  }
}

ReactDom.render(<Root />, document.getElementById('root'));

import React from 'react';
import ReactDom from 'react-dom';
class Toggle extends React.Component {
  //state = { flag: true }; // 类中定义state
  constructor(props) {
    super(props); // 一定要调用super父类构造器，否则报错
    this.state = { flag: true }; // 类中定义state
  }

  handleClick(event) {
    console.log(event.target.id);
    console.log(event.target === this);
    console.log(this);
    console.log(this.state);
    this.setState({ flag: !this.state.flag });
  }

  render() {/* 注意一定要绑定this onClick写成小驼峰 */
    return <div id="t1" onClick={this.handleClick.bind(this)}>
      点击这句话，会触发一个事件。{this.state.flag.toString()}<br />
      显示props<br />
      {this.props.name} : {this.props.parent.state.p1}{this.props.parent.state.p2}
      {this.props.children}
    </div>;
  }
}

class Root extends React.Component {
  // 定义一个对象 
  state = { p1: 'www.python', p2: '.org' }; // 构造函数中定义state 

  render() {
    return (
      <div>
        <div>Welcome to {this.state.p1}{this.state.p2}</div>
        <br />
        <Toggle name="school" parent={this}>{/*自定义2个属性通过props传给Toggle组件对象*/}
          <hr />{/*子元素通过props.children访问*/}
          <span>我是Toggle元素的子元素</span>{/*子元素通过props.children访问*/}
        </Toggle>
      </div>);
  }
}
ReactDom.render(<Root />, document.getElementById('root'));

import React from 'react';
import ReactDom from 'react-dom';

class Sub extends React.Component {
  constructor(props) {
    console.log('Sub constructor')
    super(props); // 调用父类构造器   
    this.state = { count: 0 };
  }

  handleClick(event) {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    console.log('Sub render');
    return (<div id="sub" onClick={this.handleClick.bind(this)}>
      Sub's count = {this.state.count}
    </div>);
  }

  componentWillMount() {
    // constructor之后，第一次render之前  
    console.log('Sub componentWillMount');
  }

  componentDidMount() {
    // 第一次render之后  
    console.log('Sub componentDidMount');
  }

  componentWillUnmount() {
    // 清理工作  
    console.log('Sub componentWillUnmount');
  }
}

class Root extends React.Component {
  constructor(props) {
    console.log('Root Constructor')
    super(props); // 调用父类构造器
    // 定义一个对象
    this.state = {};
  }

  render() {
    return (
      <div>
        <Sub />
      </div>);
  }
}

ReactDom.render(<Root />, document.getElementById('root'));  

import React from 'react';
import ReactDom from 'react-dom';

class Sub extends React.Component {
  constructor(props) {
    console.log('Sub constructor')
    super(props); // 调用父类构造器
    this.state = { count: 0 };
  }

  handleClick(event) {
    this.setState({ count: this.state.count + 1 });// 不要用++
  }
  render() {
    console.log('Sub render');
    return (<div style={{
      height: 200 + 'px', color: 'red', backgroundColor: '#f0f0f0',
      padding: '20px'
    }}>
      <a id="sub" onClick={this.handleClick.bind(this)} style={{ backgroundColor: 'white' }}>
        Sub's count = {this.state.count}
      </a>
    </div>);
  }

  componentWillMount() {
    // constructor之后，第一次render之前
    console.log('Sub componentWillMount');
  }

  componentDidMount() {
    // 第一次render之后
    console.log('Sub componentDidMount');
  }

  componentWillUnmount() {
    // 清理工作
    console.log('Sub componentWillUnmount');
  }

  componentWillReceiveProps(nextProps) {
    // props变更时，接到新props了，交给shouldComponentUpdate。
    // props组件内只读，只能从外部改变
    console.log(this.props);
    console.log(nextProps);
    console.log('Sub componentWillReceiveProps', this.state.count);
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 是否组件更新，props或state方式改变时，返回布尔值，true才会更新
    console.log('Sub shouldComponentUpdate', this.state.count, nextState);
    return true; // return false将拦截更新
  }

  componentWillUpdate(nextProps, nextState) {
    // 同意更新后，真正更新前，之后调用render 
    console.log('Sub componentWillUpdate', this.state.count, nextState);
  }

  componentDidUpdate(prevProps, prevState) {
    // 同意更新后，真正更新后，在render之后调用
    console.log('Sub componentDidUpdate', this.state.count, prevState);
  }
}

class Root extends React.Component {
  constructor(props) {
    console.log('Root Constructor')
    super(props); // 调用父类构造器  
    // 定义一个对象 
    this.state = { flag: true, name: 'root' };
  }

  handleClick(event) {
    this.setState({
      flag: !this.state.flag,
      name: this.state.flag ? this.state.name.toLowerCase() : this.state.name.toUpperCase()
    });
  }

  render() {
    return (
      <div id="app" onClick={this.handleClick.bind(this)}>
        My Name is {this.state.name}
        <hr />
        <Sub /> {/*父组件的render，会引起下一级组件的更新流程，导致props重新发送，即使子组件props没有
  改变过*/}
      </div>);
  }
}

ReactDom.render(<Root />, document.getElementById('root'));

import React from 'react';
import ReactDOM, {render} from 'react-dom';

// bundle.js <script src="bundle.js"></script>
// 未来bundler.js下载并相当于运行在index.html中
class Sub extends React.Component{ // 只要出现组件，就必须导入react
  constructor(props) { // 构造函数
    super(props); // 调用父类的构造函数，必须写
    console.log('组件实例化了')
    this.state = {count: 0}// 定义state状态
  }
  componentWillMount() {
   console.log('组件将要挂载到DOM上') 
  }

  // 第一次调用render

  componentDidMount() {
    console.log('组件已经挂载到DOM上')
  }
  componentWillUnmount() {
    console.log('组件已经从DOM上卸载了') 
  }
  /////////////////////////
  componentWillReceiveProps(nextProps) {
    // props变更时，接到新props了，交给shouldComponentUpdate。
    // props组件内只读，只能从外部改变
    console.log('当前值', this.props);
    console.log('未来要更新值', nextProps); // 待更新的props
    console.log('componentWillReceiveProps，props发生了变化，注意pops的改变来自外部，传入')
  }
  shouldComponentUpdate(nextProps, nextState) {
    // 是否组件更新，props或state方式改变时，返回布尔值，true才会更新
    console.log('当前值', this.state, this.props);
    console.log('未来要更新值', nextState, nextProps);
    console.log('shouldComponentUpdate, 由props或state发生变化引起执行')
    // return false; // 就算state和props有更新，到底结束，不更新组件
    return true;
  }
  componentWillUpdate(nextProps, nextState) {
    // 同意更新后，真正更新前，之后调用render 
    console.log('当前值', this.state, this.props);
    console.log('未来要更新值', nextState, nextProps);
    // nextProps = {'name': 'componentWillUpdate nextProps'}
    // nextProps.name = 'python.org' // 改了没有用. 因为props只读
    nextState.count = nextState.count + 100; // 改了有效果
    console.log('未来要更新值', nextState, nextProps);
    console.log('componentWillUpdate, 由props或state发生变化引起执行')
  }

  render() {
    console.log('render, 组件渲染')
    return <div id='sub' 
      onClick={e => {
        this.setState({count: this.state.count + 10})
      }}
      style={{backgroundColor:'#FFF', width:'80%',
      margin: '5px'
    }}>
      Sub content. props = {this.props.name} <br />
      state = {this.state.count}
    </div>
  }

  componentDidUpdate(prevProps, prevState) {
    // 同意更新后，真正更新后，在render之后调用
    console.log('当前值', this.state, this.props);
    console.log('上次值', prevState, prevProps);
    console.log('componentDidUpdate')
  }
}

class App extends React.Component{ 
  constructor(props) {
    super(props);
    this.state = {name: 'APP'}
  }
  handleClick(e) {
    this.setState({ 
      name: this.state.name + '*'
      })
  }
  render() {
    return <div 
    onDoubleClick={this.handleClick.bind(this)} 
      style={{backgroundColor: '#f0f0f0'}}>
      Root state = {this.state.name} <br />
      <Sub name={this.state.name} />
    </div>
  }
}
render(<App />, document.getElementById('root'))

import React from 'react';
import ReactDom from 'react-dom';

function Root(props) {
  return <div>{props.schoolName}</div>;
}
ReactDom.render(<Root schoolName="Hello World" />, document.getElementById('root'));

import React from 'react';
import ReactDom from 'react-dom';

let Root = props => <div>{props.schoolName}</div>;

ReactDom.render(<Root schoolName="Hello World" />, document.getElementById('root'));

let Root = props => <div>{props.schoolName}</div>;

let Wrapper = function (Component, props) {
  return (  
    <div>
      {props.schoolName}  
       <hr />   
       <Component />  
   </div>
  );
};

let Root = props => <div>{props.schoolName}</div>; 

import React from 'react';
import ReactDom from 'react-dom';

let Wrapper = function (Component) {
  function _wrapper(props) {
   return (
    <div>
      {props.schoolName}
      <hr />
      <Component />
    </div>
  );
  }
  return _wrapper;
};

let Root = props => <div>Root</div>;

let NewComp = Wrapper(Root) // 返回一个包装后的元素

ReactDom.render(<NewComp schoolName="Hello World"/>, document.getElementById('root'));

function _wrapper(props) {
  return (  
   <div>
    {props.schoolName}   
    <hr />  
    <Component />  
  </div>
  );
}

let Wrapper = function (Component) { 
    return (props) => { 
        return ( 
            <div>
                {props.schoolName}
                <hr /> 
                <Component /> 
            </div>
        );
    };
};

let Wrapper = function (Component) { 
    return props =>
        ( 
        <div>
            {props.schoolName} 
            <hr /> 
            <Component /> 
        </div>
    );
};

import React from 'react';
import ReactDom from 'react-dom';

let Wrapper = Component => props =>
    (<div>
        {props.schoolName}
        <hr />
        <Component />
    </div>);

let Root = props => <div>Root</div>;

let NewComp = Wrapper(Root)

ReactDom.render(<NewComp schoolName="Hello World" />, document.getElementById('root'));