React技术

 

React

简介

Virtual DOM

支持JSX语法

 

测试程序

 

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

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

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

 

 程序解释

 

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

class Root extends React.Component{
  render(){
    // return <div>Hello magedu</div>
    return React.createElement('div',null,'welcome to Magedu')
  }
}

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

  

 

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


class SubEle extends React.Component{
  render(){
    return <div>Sub content</div>
  } 
}

class Root extends React.Component{
  render(){
    return (
    <div>
      <h2>Welcome to magedu</h2>
      <b2 />
      <SubEle />
    </div>);
  }
}

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

JSX规范

组件状态state**

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

class SubEle extends React.Component{
  render(){
    return <div>Sub content</div>
  } 
}

class Root extends React.Component{
  //定义一个对象
  state = {
    p1:'magedu123',
    p2:'.com'
  } 
  render(){
    this.state.p1 = 'www.magedu';//可以更新
    // this.setState({p1:'www.cy'})//不可以对还在更新中的state使用setState
    return (
    <div>
      <h2>Welcome to {this.state.p1}{this.state.p2}</h2>
      <b2 />
      <SubEle />
    </div>);
  }
}

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

复杂状态例子

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function  getEventTrigger(event) {
            x = event.target;   //从事件中获取元素
            alert("触发的元素的id是"+x.id)
        }
    </script>>
</head>
<body>
    <div id="t1" onmousedown="getEventTrigger(event)">
        点击这句话，会触发一个事件，并弹出一个警告框
    </div>>
</body>
</html>

HTML DOM的JavaScript事件

 

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)}>
        点击这句话，会触发一个事件！{this.state.flag.toString()}
      </div>;
  } 
}

class Root extends React.Component{
  //定义一个对象
  state = {
    p1:'magedu123',
    p2:'.com'
  } 
  render(){
    // this.state.p1 = 'www.magedu';//可以更新
    // this.setState({p1:'www.cy'})//不可以对还在更新中的state使用setState
    setTimeout(() => this.setState({p1:'python.magedu'}),5000);
    return (
    <div>
      <h2>Welcome to {this.state.p1}{this.state.p2}</h2>
      <b2 />
      <Toggle />
    </div>);
  }
}

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

 

属性props**

 

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)}>
        点击这句话，会触发一个事件！{this.state.flag.toString()}<br />
        显示props<br />
        {this.props.name}:{this.props.parent.state.p1+this.props.parent.state.p2}<br />
        {this.props.children}
      </div>;
  } 
}

class Root extends React.Component{
  //定义一个对象
  state = {
    p1:'magedu',
    p2:'.com'
  } 
  render(){
    // this.state.p1 = 'www.magedu';//可以更新
    // this.setState({p1:'www.cy'})//不可以对还在更新中的state使用setState
    setTimeout(() => this.setState({p1:'python.magedu'}),5000);
    return (
    <div>
      <h2>Welcome to {this.state.p1}{this.state.p2}</h2>
      <b2 />
      <Toggle name="school" parent={this}>{/* 自定义两个属性通过props传给Toggle组件对象*/}
        <hr />{/*子元素通过props.children访问*/}
          <span>我是Toggle元素的子元素</span>
        </Toggle>
    </div>);
  }
}

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

构造器constructor

 

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

  }
...

class Root extends React.Component{
  //定义一个对象
  constructor(props){
    super(props)
    this.state = {p1:'magedu',p2:'.com'} 
  }
...

组件的生命周期*

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

class Sub extends React.Component{
  constructor(props){
    console.log('Sub constructor')
    super(props)  // 一定要调用super父类构造器，否则报错
    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)  // 一定要调用super父类构造器，否则报错
    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')
  }

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

  shouldComponentUpdate(nextProps,nextState){
    //是否组件更新，props或state方式改变时，返回布尔值，true才会更新
    console.log('Sub shouldComponentUpdate',this.state.count,nextState);
    return true//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 = {} ;
  }
  render(){
    return (
    <div>
      <Sub />
    </div>);
  }
}

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

无状态组件

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

function Root(props){
  return <div>
    {props.schoolName}
  </div>
}

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

改写上面的代码

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

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

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

高阶组件**

let wrapper = (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 = Component => {
  function _wrapper(props){
    return (
      <div>
      {props.schoolName}
      <hr />
      <Component />
      </div>
    );
  }
  return _wrapper
}

//创建一个无状态组件
let Root = props => <div>Root</div>

let NewCompnent = wrapper(Root) //返回一个包装后的无状态组件
ReactDom.render(<NewCompnent schoolName="magedu"/>,document.getElementById('root'));

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

let wrapper = Component => 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>
    );
  
//创建类组件
@wrapper
class Root extends React.Component{
  render (){
    return <div>Root</div>
  }
}

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

  

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

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

@wrapper
class Root extends React.Component{
  render (){
    return <div>{this.props.schoolName}</div>;
  }
}

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

带参装饰器

 

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

let wrapper = id => Component => props =>
    (
      <div id={id}>
      {props.schoolName}
      <br />
      test123
      <hr />
      <Component {...props}/>
      </div>
    );
  
@wrapper('wrapper')
class Root extends React.Component{
  render (){
    return <div>{this.props.schoolName}</div>;
  }
}

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

posted @ 2019-08-18 22:02  小鲨鱼~  阅读(196)  评论(0)    收藏  举报