changeText() {
  this.setState((state, props) => {
    console.log(this.state.message, this.props);
    return {
      message:"hello,oo"
    }
  })
}

changeText() {
  this.setState({message:"你好哦哦"})//并不会立刻更新message, 
  console.log("----",this.state.message);//此时还是constructor中的原message

  //希望数据更新后,获取对应的结果执行一些逻辑代码
  //那么可以设置setState中传入第二个参数,callback
  this.setState({message:"hello"}, () => {
    console.log("++",this.state.message);
  })
}

shouldComponentUpdate(nextProps, newState) {
  if(this.state.message !== newState.message) {
    return true
  } 
  return false
}

export class App extends Component {
  constructor() {
    super()
    this.state = {
      books: [
        { name: "css", price:121, count:1},
        { name: "js", price:52, count:1},
        { name: "html", price:11, count:1},
        { name: "c++", price:99, count:1},
      ]
    }
  }
  
  addNewMessag(index) {
    const newBook = {name:"xxx", price:25, count:1}
    //1.直接修改原有state,重新设置一遍,这对于继承自purecomponent的组件,无法引起重新渲染render
    this.state.books.push(newBook)
    this.setState({books:this.state.books})

    //正确做法,复制一份原数据修改
    const books = [...this.state.books]
    books.push(newBook)
	books[index].count++
    this.setState({books:books})
  }

export class App extends PureComponent {
  constructor(){
    super()
    this.state = {

    }
    this.titleRef = createRef()
  }
  getNativeDOM() {
    //方式1:在React元素绑定一个ref字符串
    console.log(this.refs.why);
    //方式2:提前创建好ref对象,creatRef(),将创建出的对象绑定到元素
    console.log(this.titleRef.current);
    //方式3:
    console.log(this.titleEl);
  }

  render() {
    return (
      <div>
      <h2 ref="why">xixi</h2>
      <h2 ref={this.titleRef}>xixi</h2>
      <h2 ref={el => { this.titleEl = el}}>ohuoohuo</h2>
      <button onClick={e => this.getNativeDOM()}>获取DOM</button>
      </div>
    )
  }
}

class HelloWorld extends PureComponent {
  test() {
    console.log("子组件实例");
  }
  render() {
    return <h1>hello world</h1>
  }
}

export class App extends PureComponent {
  constructor(){
    super()
    this.state = {
    }

    this.hwRef = createRef() 
  }
    
  getComponent() {
    console.log(this.hwRef.current);//获取实例对象
    this.hwRef.current.test()
  }

  render() {
    return (
      <div>
      <HelloWorld ref={this.hwRef} />
      <button onClick={e => this.getComponent()}>获取组件实例</button>
      </div>
    )
  }
}

const HelloWorld = forwardRef(function(props, ref) {
  return (
    <div>
      <h1 ref={ref}>111</h1>
      <p>222</p>
    </div>
  )
})

export class App extends PureComponent {
  constructor(){
    super()
    this.state = {
    }

    this.hwRef = createRef() 
  }
  getComponent() {
    console.log(this.hwRef.current);//获取实例对象
    this.hwRef.current.test()
  }

  render() {
    return (
      <div>
      <HelloWorld ref={this.hwRef} />
      <button onClick={e => this.getComponent()}>获取组件实例</button>
      </div>
    )
  }
}

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      username:'',
      password:'',
      isAgree:true,
      hobbies:[
        {value:"sing", text:"唱", isChecked:false},
        {value:"dance", text:"跳", isChecked:false},
        {value:"rap", text:"rap", isChecked:false},
      ],
      fruit:["orange"]
    }
  }

  handleSubmitClick(event) {
    //1.阻止默认行为,避免表单向action对象发送请求引起页面刷新
    event.preventDefault()
    //获取到所有的表单数据,对数据进行组织
    console.log(this.state.username);
    console.log(this.state.password);
    console.log(this.state.hobbies.filter(item => item.isChecked).map(item => item.value));
    console.log(this.fruit);
    //以网络请求的方式,将数据传递给服务器(ajax)
  }

  handleInputChange(event) {
    const keyName = event.target.name
    this.setState({
      [keyName]: event.target.value
    })
  }

  handleAgreeChange(event) {
    this.setState({isAgree:event.target.checked})
  }

  handleHobbiesChange(event, index){
    const hobbies = [...this.state.hobbies]
    hobbies[index].isChecked = event.target.checked
    this.setState({ hobbies })
  }

  handleFruitChange(event) {
    const options = Array.from(event.target.selectedOptions)
    const values = options.map(item => item.value)
    this.setState({ fruit: values })
  }


  render() {
    const { username,password,isAgree, hobbies, fruit} = this.state

    return (
      <div>
        <form onSubmit={e => this.handleSubmitClick(e)}>
            //文本框
          <label htmlFor="username">
            用户: <input id='username' type='text' value={username} name='username' onChange={e => this.handleInputChange(e)}/>
          </label>
          <label htmlFor="password">
            密码: <input id='password' type='password' value={password} name='password' onChange={e => this.handleInputChange(e)}/>
          </label>
            
            //单选框
          <label htmlFor="agree">
            <input id="agree" type="checkbox" checked={isAgree} onChange={e => this.handleAgreeChange(e)}/>同意协议
          </label>
            
            //多选框
          <div>
            您的爱好
            {
              hobbies.map((item,index) => {
                return (
                  <label htmlFor={item.value} key={item.value}>
                    <input type="checkbox" id={item.value} checked={item.isChecked} onChange={e => this.handleHobbiesChange(e, index)}/>
                    <span>{item.text}</span>
                  </label>
                )
              })
            }
          </div>
		//勾选框
          <select value={ fruit } onChange={e => this.handleFruitChange(e)} multiple>
            <option value="apple">apple</option>
            <option value="banana">banana</option>
            <option value="orange">orange</option>
          </select>

          <button type='submit'>提交</button>
        </form>
      </div>
    )
  }
}

export default App

render() {
    const {banners} = this.state
    return (
      <div className='main'>
        <MainBanner banners={banners} title="xixihaha"/>
        <MainProductList/>
      </div>
    )

MainBanner.propTypes = {
  banners: PropTypes.array.isRequired,
  title:PropTypes.string
}
MainBanner.defaultProps = {
  banners: [],
  title:"默认标题"
}

//1.组件的children
export class App extends Component {
  render() {
    return (
      <div>
        <NavBar>
          <button>1</button>
          <button>2</button>
          <button>3</button>
        </NavBar>
            
export class NavBar extends Component {
  render() {
    const { children } = this.props
    return (
      <div className='nav-bar'>
        <div className="left">{children[0]}</div>
        <div className="center">{children[1]}</div>
        <div className="right">{children[2]}</div>
      </div>
    )
  }
}

//1.创建context
import React from "react"
const ThemeContext = React.createContext()

export default ThemeContext


//2.调用Provider
export class App extends Component {
  constructor() {
    super()
    this.state = {
      info:{name:"alug", age:30}
    }
  }
  render() {
    const { info } = this.state

    return (
      <div>
        <UserContext.Provider value={{color:"red", size:"30"}}>
          <ThemeContext.Provider value={{color:"red", size:"30"}}>
            <Home {...info}/>
          </ThemeContext.Provider>
        </UserContext.Provider>
      </div>
    )
  }
}

//3. context中取值
export class HomeInfo extends Component {
  render() {
    console.log(this.context);
    return (
      <div>
        <h2>HomeInfo {this.context.color}</h2>
        
        <UserContext.Consumer>
          {
            value => {
              return <h2>Info User: {value.color}</h2>
            }
          }
        </UserContext.Consumer> 
      </div>
    )
  }
}

HomeInfo.contextType = ThemeContext

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      titleSize: 30
    }
  }

  addTitleSize() {
    this.setState({ titleSize: this.state.titleSize + 2})
  }

  render() {
    const { titleSize } = this.state

    return (
      <div>
        <button onClick={e => this.addTitleSize()}></button>
        <h2 style={{color:"red", fontSize:`${titleSize}px`}}>xixi</h2>
        <p style={{color:"red", fontSize:"30px"}}>I'm contenu</p>
      </div>
    )
  }
}

import appStyle from "./App.module.css"

export class App extends PureComponent {
  render() {
    return (
      <div>
        <h2 className={appStyle.title}>Title</h2>
        <p className={appStyle.content}>This is content</p>
      </div>
    )
  }
}

export default App

import styled from "styled-components";
import * as vars from './variable' 

//5可以从一个单独的文件中引入变量
// export const primaryColor = "#ff8800"
// export const secondColor = "#ff7788"
// export const fontSize = "25px"



//1.基本使用
export const AppWrapper = styled.div`
  .footer{
    border: 1px solid red;
  }
`

//2.子元素单独抽取到一个样式组件
//3.接受外部传入的props
export const SectionWrapper = styled.div.attrs(props => { //4.通过attrs给标签模版字符串提供属性
  return {
    tColor: props.color || "blue"
  } 
})` 
    border: 1px solid red;

  .title {
    font-size: ${props => props.size};
    color: ${props => props.tcolor};

    &:hover {
      background-color: black;
    }
  } 

  .content {
    font-size: ${vars.fontSize};
    color: ${vars.primaryColor};
  }
`

//6.样式的继承
const HYbutton = styled.button`
  padding: 8px 30px;
  border-radius: 5px;
`

export const HYWarnButton = styled(HYbutton)`
  background-color: red;
  color:#fff;
`

import React, { PureComponent } from 'react'
import classNames from 'classnames'


export default class App extends PureComponent {
  constructor () {
    this.state = {
      isbbb:true,
      isccc:true
    }
  }
  render() {
    const { isbbb, isccc } = this.state
    const classList = ["aaa"]
    if (isbbb) classList.push("bbb")
    if (isccc) classList.push("ccc")
    const classname = classList.join(" ")


    return (
      <div>
        {/* 第一种方式:三元运算符直接写 */}
        <h2 className={`aaa ${isbbb ? 'bbb': ''} ${isccc ? 'ccc':' '}`}>哈哈</h2>

        {/* 第二种方式:写入一个列表 */}
        <h2 className={classname}></h2>

        {/* 第三种:使用classnames包 */}
        <h2 className={classNames("aaa", {bbb:isbbb, ccc:isccc})}></h2>

      </div>
    )
  }
}

import React, { PureComponent } from 'react'


function enhancedUser(OriginComponent) {
  class NewComponent extends PureComponent {
    constructor(props) {
      super(props)

      this.state = {
        userInfo : {
          name: "codewhy",
          level:99
        }
      }
    }

    render() { 
      return <OriginComponent {...this.props} {...this.state.userInfo}/> 
        //{...this.props}代表着app中传给子组件的数据. {...this.state.userInfo}代表高阶组件传入的数据
    }
  }
}

const Home = enhancedUser(function(props) {
  return (<h1>Home: {props.name} - {props.level}- {props.banners}</h1>)
    //经过加强后,此时父组件和高阶组件传入的数据都可以使用 都在props中
})


export class App extends PureComponent {
  render() {
    return (
      <div>
        <Home banners={["xixihaha", "oooaa"]}/>
        <div>{this.props.name}</div> //类组件被包裹后,加强组件传入的数据同样也在其props中找
      </div>
    )
  }
}

export default enhancedUser(App)  //对一个类组件处理,只用在最后将其包裹

<UserContext.Consumer>
  {
    value => {
      return <h2>Info User: {value.color}</h2>
    }
  }
</UserContext.Consumer> 

//父组件
import React, { PureComponent } from 'react'
import ThemeContext from './context/theme_context'
import Product from './Product'

export class App extends PureComponent {
  render() {
    return (
      <div>
        <ThemeContext.Provider value={{color:"red", size:30}}>  //context传递的
        <Product title={"xixihaha"} />						//props传递的
        </ThemeContext.Provider>
      </div>
    )
  }
}

export default App


//单独使用一个js文件,创建一个Context对象
import { createContext } from "react";
const ThemeContext = createContext()
export default ThemeContext


//高阶组件包装Context.consumer
import ThemeContext from "./theme_context"
function withTheme(OriginComponent) {
  return (props) => {
    return(
      <ThemeContext.Consumer>
        {
         value => {
          return <OriginComponent {...value} {...props}/>   
             		//注意此处向组件中传递了context的value数据和父组件props的数据,因此子组件取数据时,直接在props统一取就行
         } 
        }
      </ThemeContext.Consumer>
    )
  }
}

export default withTheme


//子组件
import React, { PureComponent } from 'react'
import withTheme from './context/with_theme'
 
export class Product extends PureComponent {
  render() {
    const { color, size, title } = this.props //直接存props中取数据
    return (
      <div>Product:{color}- {size}-{title}</div>
    )
  }
}

export default withTheme(Product)   //调用高阶函数,可以直接

//检验授权的高阶组件
function loginAuth(OriginComponent) {
  return props => {
    // ex 从LocalStorage获取token
    const token = localStorage.getItem("token")   //检验授权的方式
    if (token) {
      return <OriginComponent {...props}/>
    } else {
      return <h2> Please Login</h2>
    }
  }
}

export default loginAuth

//需要授权后才能展示的页面
import React, { PureComponent } from 'react'
import loginAuth from './login_auth'

export class cart extends PureComponent {
  render() {
    return (
      <div>cart</div>
    )
  }
}

export default loginAuth(cart)  //高阶组件包裹

//主App
import React, { PureComponent } from 'react'
export class App extends PureComponent {
  render() {
    return (
      <div>
        <cart/>  //此时不需要任何额外处理 
      </div>
    )
  }
}

export default App

function logRenderTime(OriginComponent) {
  return class extends PureComponent {  //直接返回类时,可以省略类名
    UNSAFE_componentWillMount() {
      this.beginTime = new Date().getTime()
    }

    componentDidMount() {
      this.endTime = new Date().getTime()
      const interval = this.endTime - this.beginTime
      console.log(`页面划分${interval}ms渲染`);
    }

    render() {
      return <OriginComponent {...this.props}/> 
    }
  }
}

export default logRenderTime

//某个页面
import React, { PureComponent } from 'react'
export class App extends PureComponent {
  render() {
    return (
      <div>
        <h1>xxx</h1>
      </div>
    )
  }
}

export default logRenderTime(App)

export class App extends PureComponent {
  render() {
    return (
      <div>
        <h1>App H1</h1>
        {
          createPortal(<h2>appp h2</h2>, document.querySelector("#why"))  //(插入的内容, 挂载的地方)
        }
      </div>
    )
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <Fragment>
        <h2>xixihaha</h2>
      </Fragment>
    )
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <StrictMode>
        <div>
        <h2>xixihaha</h2>
        </div>
      </StrictMode>
    )
  }
}

.why-enter {
  opacity:0
}

.why-enter-active {
  opacity: 1;
  transition: opacity 2s ease;
}

.why-exit {
  opacity: 1;
}

.why-exit-active {
  opacity: 0;
  transition: opacity 2s ease;
}

--------------------------------------------
export class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isShow:true
    }
  }


  render() {
    const { isShow} = this.state

    return (
      <div>
        <button onClick={e => this.setState({isShow:!isShow})}>Change</button>
        <CSSTransition in={isShow} unmountOnExit={true} classNames="why" timeout={2000} appear 
            onEnter={e=> console.log("开始进入")}> //属性in表示在true和false中切换
          <h2>haha</h2>
        </CSSTransition>
      </div>
    )
  }
}

return (
  <div>
    <button onClick={e => this.setState({isLogin: !isLogin)}>{ isLogin? "退出":登录}</button>
    <SwitchTransition mode='out-in'>
    <CSSTransition key={isLogin?"exit":"login"} classNames="login" timeout={2000}>
      <h2>haha</h2>
    </CSSTransition>
    </SwitchTransition>
  </div>
)

      <TransitionGroup component="ul">
      <CSSTransition key={index} classNames="book" timeout={2000}>
<li>
	<span>{item.name}-{item.price}</span>
</li>
      </CSSTransition>
       </TransitionGroup>

//1. 2. action
const { ADD_NUMBER, CHANGE_NAME } = require("./constant")

// actionCreators: 帮助创建action
const changeNameAction = (name) => ({
  type: CHANGE_NAME,
  name
})

const addNumberAction = (num) => ({
  type: ADD_NUMBER,
  num
})

module.exports = {
  changeNameAction,
  addNumberAction
}
--------------------------------------------------------------------------------

//3. constants
const ADD_NUMBER = "add_number"
const CHANGE_NAME = "change_name"

module.exports = {ADD_NUMBER, CHANGE_NAME}



//4.将reducer和默认值(initalState)放到一个独立的reducer.js文件中
const { ADD_NUMBER, CHANGE_NAME } = require("./constant")

//初始化的数据
const initialState = {
  name: "why",
  num:100
}

// 定义reducer函数:纯函数
//两个参数
//参数一:store中目前保存的state
//参数二:本次需要更新的action(dispatch传入的action)
function reducer(state = initialState, action) {
  console.log(state, action);
  // 有新数据更新,那么返回新的state
  // 没有新数据,那么返回之前的state
  switch(action.type) {
    case CHANGE_NAME:
      return { ...state, name: action.name}
    case ADD_NUMBER:
      return {...state, counter: state.counter + action.num}
    default:
      return state
  }
}

module.exports = {reducer}



//util

const store = require("./store")
const { addNumberAction, changeNameAction} = require("./store/actionCreators")


const unsubscribe = store.subscribe(() => {
  console.log("订阅数据的变化",store.getState())
})

store.dispatch(changeNameAction("curry"))