react 笔记

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
  constructor() {
    super()
    this.name = "小明";
    this.arr = [1,2,3,4,5];
    this.state = {
      like: true
    }
  }
  handleClick() {
    this.setState({
      like: !this.state.like
    })
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
              Learn React
          </a>
          
          <label htmlFor="input">
            <p className="lable">请输入：</p>
            <input id="input" style={{border:'1px solid #61dafb', height: '30px'}}></input>
          </label>

          <p style={{color: 'yellow'}}>这是我的第1行react代码，激动啊~~</p>
          <p style={this.name === "小明" ? {color: 'red'} : {color: 'blue'}}>
            这是我的第2行react代码，激动啊~~
          </p>

          js: {this.name === "小明" ? '这是小明' : '这不是小明'}
          html: {this.name}

          {/* 这是一个注释 */}
          {
            this.arr.map((v,k)=> {
              return <p key={k}>{v},{k}</p>
            })
          }

          <button type="button" style={this.state.like ? {color: 'red'} : {color: 'blue'}}
          onClick={()=>this.handleClick()}>
            {this.state.like ? "已赞" : "喜欢"}
          </button>
        </header>
      </div>
    );
  }
}

export default App;

 

类的方式定义一个组件： 

 

 

函数方法定义组件：

事件监听:

回调函数this

 

state:

 

状态提升：

 

生命周期：

 

 

 

 

 

如何使用Context

如果要Context发挥作用，需要用到两种组件，一个是Context生产者(Provider)，通常是一个父节点，另外是一个Context的消费者(Consumer)，通常是一个或者多个子节点。所以Context的使用基于生产者消费者模式。

对于父组件，也就是Context生产者，需要通过一个静态属性childContextTypes声明提供给子组件的Context对象的属性，并实现一个实例getChildContext方法，返回一个代表Context的纯对象 (plain object) 。

import React from 'react'
import PropTypes from 'prop-types'

class MiddleComponent extends React.Component {
  render () {
    return <ChildComponent />
  }
}

class ParentComponent extends React.Component {
  // 声明Context对象属性
  static childContextTypes = {
    propA: PropTypes.string,
    methodA: PropTypes.func
  }
  
  // 返回Context对象，方法名是约定好的
  getChildContext () {
    return {
      propA: 'propA',
      methodA: () => 'methodA'
    }
  }
  
  render () {
    return <MiddleComponent />
  }
}

而对于Context的消费者，通过如下方式访问父组件提供的Context。

import React from 'react'
import PropTypes from 'prop-types'

class ChildComponent extends React.Component {
  // 声明需要使用的Context属性
  static contextTypes = {
    propA: PropTypes.string
  }
  
  render () {
    const {
      propA,
      methodA
    } = this.context
    
    console.log(`context.propA = ${propA}`)  // context.propA = propA
    console.log(`context.methodA = ${methodA}`)  // context.methodA = undefined
    
    return ...
  }
}

转载链接： https://www.jianshu.com/p/eba2b76b290b