制作井字棋

props的使用

• 父组件绑定参数

<Square value={i} />

• 子组件接收参数

    render() {
        return (
            <button className="square">
                {/* TODO */}
                {this.props.value}
            </button>
        );
    }

事件绑定

• onClick事件

class Square extends React.Component {
    render() {
        return (
            <button className="square" onClick={() => {alert('click')}}>
                {/* TODO */}
                {this.props.value}
            </button>
        );
    }
}

data

• 在class 中写constructor，在里面书写state

    constructor(props) {
        super(props)
        this.state = {
            value: null
        }
    }

更新数据

• 通过setState来进行更新数据

class Square extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: null
        }
    }

    render() {
        return (
            <button className="square" onClick={() => { this.setState({ value: 'X' }) }}>
                {/* TODO */}
                {this.state.value}
            </button>
        );
    }
}

父组件传递onClick到子组件中

class Square extends React.Component {
    render() {
        return (
            <button className="square" onClick={() => { this.props.onClick() }}>
                {/* TODO */}
                {this.state.value}
            </button>
        );
    }
}

class Board extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            Squares: Array(9).fill(null)
        }
    }
    renderSquare(i) {
        return <Square value={this.state.Squares[i]} onClick={() => this.handleClick(i)} />;
    }

    render() {
        const status = 'Next player: X';

        return (
            <div>
                <div className="status">{status}</div>
                <div className="board-row">
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                </div>
                <div className="board-row">
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                </div>
                <div className="board-row">
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                </div>
            </div>
        );
    }
}

函数式组件的写法

• 去除了this，写法更加简洁，适用于大多数场景

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

react中路由的使用

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

• exact 表示精确匹配

            <Router>
                <ul>
                    <li><Link to="/">首页</Link></li>
                    <li><Link to="/list/">列表页</Link></li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" exact component={List} />
            </Router>

react里redux 和react-redux

• 在src目录下新建store文件夹
• 在store文件夹下新建index.js

import {createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

• 在store文件夹下新建reducer.js

const defaultState = {
    inputValue: ''
}

export default (state=defaultState, action) => {
    return state
}

• 在页面中的使用

    constructor(props) {
        super(props)
        this.state = store.getState()
    }

• react-redux 的使用, 在最外层的组件包裹一层Provider

import {Provider} from 'react-redux'

class Index extends React.Component {
    constructor(props) {
        super(props)
        this.state = store.getState()
    }
    render() { 
        return (<div>
            <Router>
                <li><Link to="/">home</Link></li>
                <li><Link to="/about">About</Link></li>
                <Route path="/" exact component={Home}></Route>
                <Route path="/about" exact component={About}></Route>
            </Router>
        </div>)
    }
}
const App = (
    <Provider store={store}>
        <Index />
    </Provider>
)

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

React 无状态组件的使用

• 首先引入useState

import React, { 首先引入useState } from 'react';

• 然后通过setState去修改值

function Example(){
    const [ count , setCount ] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
        </div>
    )
}

• useEffect的使用
• 首先引入

import React, { useState , useEffect } from 'react';

• 再使用

function Example(){
    const [ count , setCount ] = useState(0);
    //---关键代码---------start-------
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
    })
    //---关键代码---------end-------

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
        </div>
    )
}

• useEffect 类似vue里的mounted和updated, 此外还可以实现解绑的功能，相当于destoryed.
• 要实现destoryed需要 return, 并且需要传第二个参数，传一个空数组，否则每次都会执行return里的内容,不只是在destory才执行

function Example(){
    const [ count , setCount ] = useState(0);

    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)

        return ()=>{
            console.log('====================')
        }
    },[])

• 第二个参数是[], 那么只会在销毁时执行，如果[]中写了变量，也会在变量改变时执行

useContext

• 首先引入createContext

import React, { useState , createContext } from 'react';

• 然后初始化

const CountContext = createContext()

• 使用

import React, { useState , createContext } from 'react';
//===关键代码
const CountContext = createContext()

function Example4(){
    const [ count , setCount ] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
            {/*======关键代码 */}
            <CountContext.Provider value={count}>
            </CountContext.Provider>

        </div>
    )
}
export default Example4;

• 子组件接收
• 引入 useContext

import React, { useState , createContext , useContext } from 'react';