React学习笔记一

const title = <h1>Hello JSX</h1>

ReactDOM.render(title, root)

const name = 'Jack'
const dv = (
	<div>你好，我叫：{name} </div>
)

const isLoading = false
cont loadData = () => {
	if (isLoading) {
		return <div>loading...</div>
	}
	
	return <div>数据加载完成，此处显示加载后的数据</div>
}

const title = (
	<h1>
		条件渲染：
		{loadData()}
	</h1>
)

ReactDOM.render(title, document.getElementById('root'))

const isLoading = false
cont loadData = () => {
    return isLoading && (<div>loading...</div>)
}

const title = (
	<h1>
		条件渲染：
		{loadData()}
	</h1>
)

ReactDOM.render(title, document.getElementById('root'))

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

const songs = [
    {id: 1, name: '111'},
    {id: 2, name: '222'},
    {id: 3, name: '333'},
]

const title = (
	<ul>
        {songs.map(item = > <li key={item.id}>{item.name}</li>)}
	</ul>
)

ReactDOM.render(title, document.getElementById('root'))

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

//引入css
import './css/index.css'

const list = (
    <h1 className="title" style={{ clolr: 'red', backgroundColor: 'skyblue'}}>
)

ReactDOM.render(list, document.getElementById('root'))

function Hello() {
    return (
        <div>我是一个函数组件</div>
    )
}

ReactDOM.render(<Hello />, root)

const Hello = () => <div>我是一个箭头函数组件</div>

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

ReactDOM.render(<Hello />, root)

// Hello.js
import React from 'react'
class Hello extends React.Component {
    render() {
        return <div>Hello Class Component</div>
    }
}

// 导出Hello组件
export default Hello

// index.js
import Hello from './Hello'
// 渲染导入的Hello组件
ReactDOM.render(<Hello />, root)

class App exntends React.Component {
    handleClick() {
        console.log('单击事件被触发')
    }
    
    render() {
        return (
            <button onClick={this.handleClick}>点我</button>
        )
    }
}

function App() {
    function handleClick() {
        console.log('单击事件出发了')
    }
    
    return(
        <button onClick={handleClick}>点我</button>
    )
}

function handleClick(e) {
    e.preventDefault() //组织浏览器的默认行为
    console.log('事件对象', e)
}

<a onClick={handleClick}>点我，不会跳转页面</a>

class Hello extends React.Component {
    constructor() {
        // ES6中必须包含
        super();
        // 初始化state
        this.state = {
            count: 0,
        };
    }
    
    render() {
        return (
            <div>有状态组件</div>
        )
    }
}

class Hello extends React.Component {
    // 简化语法
    // 初始化state
    state = {
        count: 0
    }
    
    render() {
        return (
            <div>有状态组件</div>
        )
    }
}

class Hello extends React.Component {
    // 简化语法
    // 初始化state
    state = {
        count: 0
    }
    
    render() {
        return (
            <div>计数器: {this.state.count}</div>
        )
    }
}

class App extends React.Component {
    state = {
        count: 0
    }

	render() {
        return (
            <div>
                <h1>计数器: { this.state.count }</h1>
                <button onClick={() => {
                        this.setState({
                            count: this.state.count + 1
                        })
                    }}>+1</button>
            </div>
        )
    }
}

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

class App extends React.Component {
    state = {
        count: 0
    }

	// 事件处理程序
	onIncrement(){
        console.log('事件处理程序中的this', this)
        this.setState({
            count: this.state.count + 1
        })
    }

	render() {
        return (
            <div>
                <h1>计数器: { this.state.count }</h1>
                <button onClick={() => this.onIncrement()}>+1</button>
            </div>
        )
    }
}

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

class App extends React.Component {

	constructor() {
        super()
        this.state = {
        	count: 0
    	}
        this.onIncrement = this.onIncrement.bind(this)
    }

	// 事件处理程序
	onIncrement(){
        console.log('事件处理程序中的this', this)
        this.setState({
            count: this.state.count + 1
        })
    }

	render() {
        return (
            <div>
                <h1>计数器: { this.state.count }</h1>
                <button onClick={this.onIncrement}>+1</button>
            </div>
        )
    }
}

class App extends React.Component {
    state = {
        count: 0
    }

	// 事件处理程序
	onIncrement = () => {
        console.log('事件处理程序中的this', this)
        this.setState({
            count: this.state.count + 1
        })
    }

	render() {
        return (
            <div>
                <h1>计数器: { this.state.count }</h1>
                <button onClick={this.onIncrement}>+1</button>
            </div>
        )
    }
}

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

class App extends React.Component {
    state = {
        txt: '',
    }

	handleChange = e => {
        this.setState({
            txt: e.target.value
        })
    }

	render() {
        return (
            <div>
                <input type="text" value={this.state.txt} onChange={this.handleChange} />
            </div>
        )
    }
}

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

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      txt: '',
      content: '',
      city: 'bj',
      Selection: false,
    }
  }

  handleChange = e => {
    this.setState({
      txt: e.target.value
    })
  }

  handleContent = e => {
    this.setState({
      content: e.target.value
    })
  }

  handleCity = e => {
    this.setState({
      city: e.target.value
    })
  }

  handleSelection = e => {
    this.setState({
      Selection: e.target.checked
    })
  }

  render(){
    return (
      <div>
        <input type="text" value={this.state.txt} onChange={this.handleChange}></input>
        <br/>

        <textarea value={this.state.content} onChange={this.handleContent}></textarea>
        <br/>

        <select value={this.state.city} onChange={this.handleCity}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <br/>

        <input type="checkbox" checked={this.state.Selection} onChange={this.handleSelection}></input>
      </div>
    )
  }

}

ReactDOM.render(
  <App />, document.getElementById("root")
);

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      txt: '',
      content: '',
      city: 'bj',
      Selection: false,
    }
  }

  handleChange = e => {
    // 获取当前DOM对象
    const target = e.target;

    // 根据类型获取值
    const value = target.type === 'checkbox'
      ? target.checked
      : target.value;

    // 获取name
    const name = target.name;

    this.setState({

      // 此处定义属性使用了ES6中的新特性 属性名表达式
      // 即使用表达式作为属性或函数名
      // 此处会将name转化为string
      [name]: value,
    });
  }

  render(){
    return (
      <div>
        <input type="text" name='txt' value={this.state.txt} onChange={this.handleChange}></input>
        <br/>

        <textarea name='content' value={this.state.content} onChange={this.handleChange}></textarea>
        <br/>

        <select name='city' value={this.state.city} onChange={this.handleChange}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <br/>

        <input name='Selection' type="checkbox" checked={this.state.Selection} onChange={this.handleChange}></input>
      </div>
    )
  }

}

ReactDOM.render(
  <App />, document.getElementById("root")
);

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(){
    super()
    this.txtRef = React.createRef()
  }

  // 获取文本框的值
  getTxt = () => {
    console.log('文本框的值为：', this.txtRef.current.value);
  }

  render(){
    return (
      <div>
        <input type="text" ref={this.txtRef} />

        <button onClick={this.getTxt}>获取文本框的值</button>
      </div>
    )
  }

}

ReactDOM.render(
  <App />, document.getElementById("root")
);

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {

  constructor() {
    super()
    this.state = {
      comments: [
        { id: 1, name: 'jack', comment: 'You jump'},
        { id: 2, name: 'rose', comment: 'I jump'},
        { id: 3, name: 'joker', comment: 'I see you jump'},
      ],
      // 当前评论人
      userName: '',
      // 当前评论内容
      userContent: '',
    }
  }

  renderList() {
    const {comments} = this.state
    if(comments.length === 0) {
      return (
        <div className='no-comment'>暂无评论，快去评论吧</div>
      )
    } else {
      return (
        <ul>
          { 
            comments.map(item => (
              <li key={item.id}>
                <h3>评论人：{item.name}</h3>
                <p>评论内容：{item.comment}</p>
              </li>
            ))
          }
        </ul>
      )
    }
  }

  handleChange = (e) => {
    const {name, value} = e.target;
    this.setState({
      [name]: value,
    });
  }

  addComment = () => {
    const {comments, userName, userContent} = this.state

    //判空，使用trim去除空格
    if(userName.trim() === '' || userContent.trim === '' ) {
      alert('请输入评论人和评论内容');
      return;
    }
    // 此处使用了ES6的新特性：拓展运算符...
    // 该运算符用于将可便利对象拆分为单个
    const newIndex = comments.length + 1;
    const newComments = [...comments,
      {
        id: newIndex,
        name: userName,
        comment: userContent,
      }
    ];

    console.log(newComments);

    this.setState({
      comments: newComments,
      userName: '',
      userContent: '',
    });
  }

  render(){
    const {userName, userContent} = this.state;

    return (
      <div className='app'>
        <div>
          <input
            name='userName'
            className='user'
            value={userName}
            type='text'
            placeholder='请输入评论人'
            onChange={this.handleChange} />
          <br/>

          <textarea
            className='content'
            name='userContent'
            cols='30'
            row = '10'
            placeholder='请输入评论内容'
            value={userContent}
            onChange={this.handleChange}
            />
            <br />
            <button onClick={this.addComment}>发表评论</button>
        </div>
        {/* 通过条件渲染决定渲染什么内容 */}
        {this.renderList()}
      </div>
    )
  }

}

ReactDOM.render(
  <App />, document.getElementById("root")
);

<Hello name='jack' age = {19} />

function Hello(props) {
    console.log(props)
    return (
        <div>接受到数据: {props.name}</div>
    )
}

class Hello extends React.Component {
    
    // 推荐写法
    constructor(props) {
        super(props)
    }
	render() {
		return (
			<div>接收到数据：{this.props.age}</div>
		)
	}
}

class Parent extends React.Component {
    state = { lastName: '王' }
	render() {
        return (
            <div>
                传递给子组件：<Child name={this.state.lastName} />
            </div>
        )
    }
}

function Child(props) {
    return <div>子组件接受：{props.name} </div>
}

class Parent extends React.Component {
    // 提供回调
    getChildMsg = (msg) => {
        console.log('接收到子组件数据', msg)
    }
	render() {
        return (
            // 传递给子组件
            <div>
                子组件：<Child getMsg={this.getChildMsg} />
            </div>
        )
    }
}

class Child extends React.Component {
    // 提供回调
    stats = {childMsg: 'React'}
	handleClick = () => {
		this.props.getMsg(this.state.childMsg)        
    }
	render() {
        return (
            // 传递给子组件
            <button onClick={this.handleClick}>点我，给父组件传递数据</button>
        )
    }
}

class Counter extends React.Component {
    // 提供共享状态
    state = {
        count: 0
    }
	
	// 提供修改状态的方法
	onIncrement = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    
    render() {
        return (
            <div>
                <Child1 count={this.state,count} />
                <Child2 onIncrement={this.onIncrement} />
            </div>
        )
    }
}

const Child1 = (props) => {
    return <h1>计数器：{props.count}</h1>
}

const CHild2 = (props) => {
    return <button onClick={() => props.onIncrement}> +1 </button>
}

// 创建context
const {Provider, Consumer} = React.getContext() 

class App extends React.Component {
	render() {
        return (
            // 使用Provider作为父节点
            // 设置要传递的数据
            <Provider value="pink">
            	<div className='app'>
                	<Node />
	            </div>
			</Provider>
        )
    }
}

const Node = props => {
    return (
        <div className="node">
            <subNode />
        </div>
    )
}

const SubNode = props => {
    return (
        <div className="subnode">
            <Child />
        </div>
    )
}

const Child = props => {
    return <div className='child'>
        <!-- 使用consumer组件接受数据 -->
        <Consumer>
            {
                data => <span>我是子节点 -- {data}</span>
            }
        </Consumer>
    </div>
}

ReactDOm.render(<App />, document.getElementById('root'))

const App = props => {
    return (
        <div>
            <h1>组件标签的子节点：</h1>
            {props.children}
        </div>
    )
}

ReactDOM.render{<App>我是子节点</App>, document.getElementById('root')}

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'

const App = props => {
  const arr = props.colors
  const lis = arr.map((item, index) => <li key={index}>{item}</li>)

  return <ul>{lis}</ul>
}

// 添加props校验
App.propTypes = {
  colors: PropTypes.array
}

ReactDOM.render(<App colors={['red', 'blue']} />, document.getElementById('root'))

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'

const App = props => {
  return (
    <div>
      <h1>props校验：</h1>
    </div>
  )
}

// 添加props校验
// 属性a的类型：        数值（number）
// 属性fn的类型：       函数（func）且为必填
// 属性tag的类型：      React元素（element）
// 属性filter的类型：   对象（{area: '上海', price: 1999}）
App.propTypes = {
  a: PropTypes.number,
  fn: PropTypes.func.isRequired,
  tag: PropTypes.element,
  filter: PropTypes.shape({
    area: PropTypes.string,
    price: PropTypes.number,
  })
}

ReactDOM.render(<App fn={() => {}} />, document.getElementById('root'))

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'

const App = props => {
  return (
    <div>
      <h1>props默认值：{props.pageSize}</h1>
    </div>
  )
}

// 添加props默认值
App.defaultProps = {
  pageSize: 10
}

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

class App extends React.Component {
    
    constructor(props) {
        super(props)
        
        this.state = {
            count: 0
        }
        console.warn('生命周期钩子函数：constructor')
    }
    
   	componentDidMount(){
         console.warn('生命周期钩子函数：componentDidMount')
    }
    
    handleClick = () =>{
        this.setState({
            count: this.state.count + 1
        })
    }
    
    render() {
        return (
            <div>
                <Counter count={this.state.count} />
                <button onClick={this.handleClick}>打豆豆</button>
            </div>
        )
    }
}

class Counter extends React.Component {
    render() {
        console.warn('--子组件--生命周期钩子函数：render')
        return <h1 id='title'>统计豆豆被打的次数：{this.props.count}</h1>
    }
    

    
    conponentDidUpdate(prevProps) {
        console.warn('--子组件--生命周期钩子函数：conponentDidUpdate')
        
        console.log('上一次的props: ', prevProps, '，当前的props：', this.props)
        if(prevProps.count !== this.props.count) {
            this.setState({})
            // 发送ajax请求的代码
        }
    }
}

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

class App extends React.Component {
    
    constructor(props) {
        super(props)
        
        this.state = {
            count: 0
        }
        console.warn('生命周期钩子函数：constructor')
    }
    
   	componentDidMount(){
         console.warn('生命周期钩子函数：componentDidMount')
    }
    
    handleClick = () =>{
        this.setState({
            count: this.state.count + 1
        })
    }
    
    render() {
        return (
            <div>
                {this.state.count > 3 ? (
                    <p>豆豆被打死了~</p>
                ) : (
                  <Counter count={this.state.count} />  
                )}
                <button onClick={this.handleClick}>打豆豆</button>
            </div>
        )
    }
}

class Counter extends React.Component {
    
    conponentDidMount() {
        // 开启定时器
    	this.timerId = setInterval(() => {
            console.log("定时器正在执行~")
        }. 500)    
    }
    
    render() {
        console.warn('--子组件--生命周期钩子函数：render')
        return <h1 id='title'>统计豆豆被打的次数：{this.props.count}</h1>
    }
    
    conponentWillUnmount(){
        console.warn('--子组件--生命周期钩子函数：conponentWillUnmount')
        // 清理定时器
        clearInterval(this.timerId)
    }
    
    conponentDidUpdate(prevProps) {
        console.warn('--子组件--生命周期钩子函数：conponentDidUpdate')
        
        console.log('上一次的props: ', prevProps, '，当前的props：', this.props)
        if(prevProps.count !== this.props.count) {
            this.setState({})
            // 发送ajax请求的代码
        }
    }
}

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

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'

/*
  render props 模式
*/

// 导入图片资源
import img from './images/end_favicon128.ico'

// 创建复用组件
class Mouse extends React.Component {
  constructor(props) {
    super(props)
      
    // 鼠标位置state
    this.state = {
      x: 0,
      y: 0,
    }
  }

  // 鼠标位置事件处理函数
  handleMouseMove = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY,
    })
  }

  // 开启鼠标监听事件
  componentDidMount() {
    window.addEventListener('mousemove', this.handleMouseMove)
  }

  render() {
    return this.props.render(this.state)
  }
}

const App = props => {
  return (
    <div>
      <h1>render props 模式</h1>
      <Mouse render={(mouse) => {
        return (
          <p>鼠标位置：{mouse.x}, {mouse.y}</p>
        )
      }} />

      {/* 复用Mouse组件 */}
      <Mouse render={mouse => {
        return (
          <img src={img} style={{
            position: 'absolute',
            top: mouse.y,
            left: mouse.x
          }} />
        )
      }}>
      </Mouse>
    </div>
  )
}


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

<Mouse>
    {(mouse) => <p>鼠标位置是 {mouse.x}, {mouse.y}</p>}
</Mouse>

// 组件内部
render() {
  return this.props.children(this.state)
}

const Child = props => {
    return <div className='child'>
        <!-- 使用consumer组件接受数据 -->
        <Consumer>
            {
                data => <span>我是子节点 -- {data}</span>
            }
        </Consumer>
    </div>
}

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
import react from 'react';
import img from './images/end_favicon128.ico'
import { render } from '@testing-library/react';

/*
  高阶组件模式
*/

// 创建高阶组件
function withMouse(WrappedComponent) {
  // 该组件提供复用的状态逻辑
  class Mouse extends react.Component {
    constructor() {
      super()

      this.state = {
        x: 0,
        y: 0,
      }
    }

    componentDidMount() {
      window.addEventListener('mousemove', this.handleMouseMove)
    }

    handleMouseMove = e => {
      this.setState({
        x: e.clientX,
        y: e.clientY,
      })
    }

    render() {
      return <WrappedComponent {...this.state}></WrappedComponent>
    }

    componentWillUnmount() {
      window.removeEventListener('mousemove', this.handleMouseMove)
    }
  }

  return Mouse
}


const Cat = props => (
  <img src={img} alt='logo' style={{
    position: 'absolute',
    top: props.y,
    left: props.x,
  }}
  />
)

const Position = props => (
  <p>
    鼠标当前位置：(x: {props.x}, y: {props.y})
  </p>
)


// 获取增强后的组件
const MousePosition = withMouse(Position)

const CatMouse = withMouse(Cat)

class App extends React.Component {
  render (){
    return (
      <div>
        <h1>高阶组件模式</h1>
        {/* 渲染增强后的组件 */}
        <MousePosition />
        <CatMouse />
      </div>
    )
  }
} 


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

// 获得组件的displayName的函数
function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

// 设置displayName
Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`

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

this.setState((state, props) => {
    return {
        count: state.count + 1
    }
})
this.setState((state, props) => {
    return {
        count: state.count + 1
    }
})
// 两次setState将导致count+2

this.setState(
    (state, props) => {},
    () => {console.log('这个回调函数会在状态更新后立即执行')}
)

class Father extends Component {
    constructor(props) {
        super(props);
        this.state = { value:0 }
    }
    onClick=()=>{
        this.setState({
            value : this.state.value+1
        })
    }
    render() { 
        console.log('father render')
        return (<div>
            <button onClick={this.onClick}>click me</button>
            <Son value={this.state.value}></Son>
        </div>  );
    }
}

import React, { Component,PureComponent } from 'react';

class Son extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        console.log('son render')
        return (<div>
            {this.props.value}
        </div>  );
    }
}
 
export default Son;

const newObj = {...state.obj, number:2}
this.setState({obj: newObj})

// 更新数组时不要使用push/unshift等直接修改当前数组的方法
// 可以使用concat或slice等返回新数组的方法
this.setState({
    list: [...this.state.list, {/*新数据*/}]
})

this.props.history.push('/home')

import React, { Component } from "react";
import Count from './component/Count'

//App.js
class App extends Component {
    render() {
        return (
            <div>
                <Count />
            </div>
        )
    }
}

export default App

import React, { Component } from "react";

// Count组件
class Count extends Component {

    constructor() {
        super()
        this.state = {
            count:0,
            selectNumber: '1',
        }
    }

    increment = () => {
        // 函数体
        const {count, selectNumber} = this.state
        console.log(count, typeof(selectNumber));
        this.setState({
            count: count + (+ selectNumber)
        })
    }
    decrement = () => {
        // 函数体
        const {count, selectNumber} = this.state
        console.log( count, typeof(selectNumber));
        this.setState({
            count: count - (+ selectNumber),
        })
    }
    incrementIfOdd = () => {
        // 函数体
        const {count, selectNumber} = this.state
        console.log(count, selectNumber);
        if(count % 2 !=0){
            this.setState({
                count: count + + selectNumber
            })
        }
    }
    incrementAsync = () => {
        // 函数体
        const {count, selectNumber} = this.state
        console.log(count, selectNumber);
        setTimeout(() => {
            this.setState({
                count: count + + selectNumber
            })
        }, 500)
    }
    handleChange = (e) => {
        const target = e.target

        const value = target.type === "checkbox" ? target.checked : target.value;
        const name = target.name

        this.setState({
            [name]: value
        })
    }
    render() {
        return (
            <div>
                <h1>当前求和为：{this.state.count}</h1>
                <select name="selectNumber" value={this.state.selectNumber} onChange={this.handleChange}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数则加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

export default Count

import React, { Component } from "react";
import store from "../../redux/store";

/**
 * count组件
 */
class Count extends Component {

    constructor() {
        super()
        this.state = {
            selectNumber: '1',
        }
    }

    componentDidMount() {
        // 由于共享状态的更新不会引起本组件重新渲染，因此需要监听共享数据的变化
        // 在组件挂载完成后为组件添加一个检测store中state变化的功能，通过回调函数重新渲染
        store.subscribe(() => {
            this.forceUpdate()
        })
    }

    increment = () => {
        // 函数体
        const {selectNumber} = this.state
        // 分发一个action
        store.dispatch({type:'increment', data:selectNumber*1})
    }
    decrement = () => {
        // 函数体
        const {selectNumber} = this.state
        store.dispatch({type:'decrement', data:selectNumber*1})
    }
    incrementIfOdd = () => {
        // 函数体
        const {selectNumber} = this.state
        const count = store.getState()
        if(count % 2 !=0){
            store.dispatch({type:'increment', data:selectNumber*1})
        }
    }
    incrementAsync = () => {
        // 函数体
        const {selectNumber} = this.state
        setTimeout(() => {
            store.dispatch({type: 'increment', data: selectNumber*1})
        }, 500)
    }
    handleChange = (e) => {
        const target = e.target

        const value = target.type === "checkbox" ? target.checked : target.value;
        const name = target.name

        this.setState({
            [name]: value
        })
    }
    render() {
        return (
            <div>
                {/* 获取利用store，Reducer中的公共状态 */}
                <h1>当前求和为：{store.getState()}</h1>
                <select name="selectNumber" value={this.state.selectNumber} onChange={this.handleChange}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数则加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

export default Count

/**
 * countReducer
 * 该文件用于创建一个为Count组件服务的reducer，本质是一个函数
 * reducer函数将接收到两个参数，分别为：1. 之前的状态preState，动作对象action
 */


const initState = 0
// 事实上该函数是一个纯函数
export default function countReducer(preState = initState, action) {
    console.log(preState, action)
    // 从action对象中解析type、data
    const {type, data} = action
    // 根据type类型判断操作
    switch (type) {
        case 'increment':
            return preState + data
        case 'decrement':
            return preState - data
        default:
            return preState
    }
}

/**
 * store
 * 暴露一个store对象
 */
import {createStore} from 'redux'
// 引入为count服务的reducer
import countReducer from './countReducer'

export default createStore(countReducer)

/**
 * 该模块用于定义action对象中type类型的常量值
 */

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

/**
 * countActionCreator.js
 * 该组件专门为Count组件生产action对象
 */
import { INCREMENT, DECREMENT } from "./constant"

// redux中规定同步action指action的值为对象
export const createIncrementAction = data => ({type:INCREMENT, data})

export const createDecrementAction = data => ({type:DECREMENT, data})

// redux中规定异步action指action的值为函数
// 异步action中一般都会使用同步action，因此如果使用异步action，store会将dispatch传入
// 异步action不是必须的，逻辑可以自己在组件中实现
export const createIncrementAsyncAction = (data, time) => {
    return (dispatch) => {
        setTimeout(() => {
            dispatch(createIncrementAction(data))
        },time)
    }
}

/**
 * countReducer
 * 该文件用于创建一个为Count组件服务的reducer，本质是一个函数
 * reducer函数将接收到两个参数，分别为：1. 之前的状态preState，动作对象action
 */
import { INCREMENT, DECREMENT } from "./constant"

const initState = 0
// 事实上该函数是一个纯函数
export default function countReducer(preState = initState, action) {
    console.log(preState, action)
    // 从action对象中解析type、data
    const {type, data} = action
    // 根据type类型判断操作
    switch (type) {
        case INCREMENT:
            return preState + data
        case DECREMENT:
            return preState - data
        default:
            return preState
    }
}