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 ... } }