React语法

JSX语法

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

import './index.scss'

let style = {};
let name = 'Li';
let names = ['张三','李四','王五'];
let flag = false;

let jsx = (<div className="jsx" style={style}>
            {/* 条件判断 */}
            {
              flag ? <p>i am {name}</p> : <p>i am not {name}</p>
            }
            {/* 变量使用 */}
            jsx...{name}
            {/* 数组循环 */}
            {
              names.map((name, index)=> <p key={index}>i am {name}</p>)
            }
          </div>);

ReactDOM.render(jsx,document.getElementById('app'));

组件

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

// 基础组件
function Componetns() {
  return <h1>i am li</h1>
}

// ES6写法
class ES6Compontnts extends React.Component{
  render() {
    return <h1>i am li</h1>
  }
}

ReactDOM.render(
  <div>
    <Componetns/>
    <ES6Compontnts/>
  </div>,
  document.getElementById('app')
);

state & props用法

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

class ES6Compontnts extends React.Component{
  constructor (props) {
    super(props);
    this.state = {
      name: 'li'
    }
  }
  render() {
    setTimeout(()=>{
      this.setState({
        name: 'Reson test'
      })
    },2000)
    return <h1>i am {this.props.name}</h1>
  }
}

ReactDOM.render(
  <div>
    <ES6Compontnts name="zhang"/>
  </div>,
  document.getElementById('app')
);

事件

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

class Component extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: 'zhang'
    }
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render(){
    return (
      <div>
        <button onClick={this.handleClick}>
          {this.state.isToggleOn ? 'ON' : 'OFF'}
        </button>
      </div>
    )
  }
};

ReactDOM.render(
  <Component/>,
  document.getElementById('app')
);

生命周期

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

// 生命周期
// Initialization: 组件初始化  setup props and state
// Mounting: 挂载阶段  componentWillMount render componentDidMount
// Updating：运行阶段  
// props {
//   componentWillReceiveProps 
//   shouldComponentUpdate 
//   componentWillUpdate 
//   render 
//   componentDidUpdate
// }
// states{
//   shouldComponentUpdate
//   componentWillUpdate
//   render
//   componentDidMount
// }
// Unmounting：卸载阶段  componentWillUnmount
// Error Handling: 错误处理
class Component extends React.Component{
  // 构造函数
  constructor(props){
    super(props);
    this.state = {
      data: '张三'
    }
    console.log('初始化数据: constructor');
  }
  render(){
    console.log('渲染：render');
    // return 只有一个根元素
    return <p>
              App: {this.props.data}
              <button onClick={()=>{this.handlClick()}}>更新组件{this.state.data}</button>
          </p>
  }
  // 挂载时
  // 在组件已经被渲染到 DOM 中后运行
  componentDidMount(){
    console.log('挂载时: componentDidMount');
  }
  // 处理点击事件
  handlClick() {
    console.log('更新数据');
    this.setState({
      name: '李四'
    })
  }
  // 将要接收父组件传来的props
  componentWillReceiveProps(){
    console.log('将要接收父组件传来的props: componentWillReceiveProps');
  }
  // 子组件是否应该更新
  shouldComponentUpdate(){
    console.log('子组件是否应该更新: shouldComponentUpdate');
    return true
  }
  // 组件将要更新
  componentWillUpdate(){
    console.log('组件将要更新: componentWillUpdate');
  }
  // 组件更新完成
  componentDidUpdate(){
    console.log('组件更新完成: componentDidUpdate');
  }
  // 卸载时
  componentWillUnmount() {
    console.log('卸载时: componentWillUnmount');
  }
}

class App extends React.Component{
  // 构造函数
  constructor(props){
    super(props);
    this.state = {
      data: 'old 张三',
      hasChild: true
    }
    console.log('初始化数据: constructor');
  }
  onPropsChange(){
    console.log('更新Props')
    this.setState({
      data: 'new 张三'
    })
  }
  onDel() {
    console.log('销毁子组件');
    this.setState({
      hasChild: false
    })
  }
  render(){
    return (
      <div>
        {
          this.state.hasChild ? <Component data={this.state.data}/> : null
        }
        <button onClick={()=>{this.onPropsChange()}}>改变Props</button>
        <button onClick={()=>{this.onDel()}}>销毁子组件</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);