我的react学习笔记-CSDN博客

本文链接：https://blog.csdn.net/ef_ef/article/details/113436220
这个复习笔记估计只有我自己才看得懂

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">

  </div>

  <script type="text/babel">

    ReactDOM.render(
      React.createElement(
        'h1', 
        { className: 'red', name: 'jack' }, 
        "Hello World"
      ),
      document.querySelector('#app')
    );

    ReactDOM.render(
      <h2 className="red" style={{width:300}}>hello {1+1}</h2>,
      document.querySelector('#app')
    );

    function Login(props) {
      return <button>{props.content}</button>;
    }
    ReactDOM.render(
      <Login content="登录" />,
      document.querySelector('#app')
    );
    
    function Logout(props) {
      return <button onClick={props.updateUser}>{props.content}</button>;
    }
    
    /**
     * 生命周期
     * Initialization
     * Mounting
     * Updation
     * Unmounting
     */

    class App extends React.Component {
      // constructor(props) {
      //   super(props);
      //   this.state = {
      //     ///
      //   };
      // }
      state = {
        isLogin: false,
      }
      componentWillMount() {
        // axios
      }
      componentDidMount() {
      
      }
      updateUser = () => {
        this.setState({ // setState才能触发render
          isLogin: !this.state.isLogin,
        });
      }
      componentWillReceiveProps() {
        
      }
      shouldComponentUpdate() {
        return true; // true即需要更新，false即不需要更新
      }
      componentWillUpdate() {

      }
      componentDidUpdate() {

      }
      componentWillUnmount() {

      }
      render() { // 组件渲染或更新阶段
        const isLogin = this.state.isLogin;
        return <div>
          <h1>Hello2,{this.props.name},{this.state.a}</h1>
          <button onClick={this.updateUser}>update</button>
          { isLogin ? <Login content="Login" /> : <Logout content="Logout" updateUser={this.updateUser} /> }
        </div>;
      }
    }
    ReactDOM.render(
      <App name="Juln" />,
      document.querySelector('#app')
    );

    class TodoList extends React.Component {
      state = {
        arr: this.props.arr,
        input: '',
      }
      onChange = (e) => {
        this.setState({
          input: e.target.value,
        });
      }
      hendleAdd = () => {
        let list = this.state.arr;
        list.push(+this.state.input);
        this.setState({
          arr: list,
        });
        console.log(this.state.arr)
      }
      render() {
        return <div>
          push item to arr: <input type="text" value={this.state.input} onChange={this.onChange} />
          <button onClick={this.hendleAdd}>push</button>
          <ul>
            {this.state.arr.map((item,id) => <li key={id}>{item}</li>)}
          </ul>
        </div>;
      }
    }
    ReactDOM.render(
      <TodoList arr={[1,2,3]} />,
      document.querySelector('#app')
    );
  </script>

  <script>
    // 脚手架
    // create-react-app react-demo
    // npm i node-sass -D
      // import './App.scss';
    // npm i axios -S
    // npm i antd -S
      /*
      import { Input, Button } from 'antd';
      import 'antd/dist/antd.css';
      const Search = Input.Search;
      <Input />
      <Button>add</Button>
      <Search enterButton="add" />
       */
    // npm i react-router-dom -S
      // HashRouter, BroserRouter, Route, Switch, exact
      /*
      不用Switch组件 => 匹配所有合适的路由; 
      Switch组件 => 匹配第一个合适的路由;
      exact => 精准匹配
       */
      /*
      import React from 'react';
      import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
      import App from './pages/app';
      import Login from './pages/login';
      import Home from './pages/home';
      import NoFound from './pages/404';

      export default function IRouter() {
        return <Router>
          <Switch>
            <Route exact path="/">
              <Redirect to="/app"></Redirect>
            </Route>
            <Route exact path="/app" component={App}></Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/home/:id" component={Home}></Route>
            <Route path="*" component={NoFound}></Route>
          </Switch>
        </Router>;
      }
       */
      // Link, NavLink
      /*
      import React from 'react';
      import { Link } from 'react-router-dom';

      export default function App() {
        return <div>
          This is App
          <br />
          <Link to="/login">login</Link>
          <br />
          <Link to="/home">home</Link>
          <br />
        </div>;
      }
       */
      /*
      class组件中路由的跳转: this.props.history.push('/login');
      class组件中路由的params的获取: this.props.match.params.id
       */
    // React-Hooks(useState, useEffect), Router-Hooks(useParams, useHistory)
      /*
      useState, useEffect, useParams, useHistory都是函数式组件的api
      useState => 相当于class组件中的setState
      useEffect => 组件加载时和数据更新时的生命周期函数
      useEffect第二个参数为[]时 => 函数只加载一次
      useParams => 获取路由的params
      useHistory => 进行路由的跳转
       */
      /*
      import React, { useState, useEffect } from 'react';
      import { useParmas, useHistory } from 'react-router-dom'
      export default function Test() {
        const [count, setCount] = useState(0);
        const params = useParams();
        const history = useHistory();
        useEffect( () => {

        }, []);
        return <div>
          <p>params.id {params.id}</p>
          <p>count: {count}</p>
          <button onClick={() => setCount(count+1)}>count+1</button>
          <button onClick={()=>history.push('/')}></button>
        </div>
      }
       */
    // Redux DevTools
      /* 使用方法: 
          createStore( 
            xxReducer, 
            window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
          )
       */  
    // npm i redux -S
      /*
      store
      state
      通过reducer=(state,action) => {...}创建store, reducer用于管理state的获取和修改
      通过store.dispatch(action)派发事件,action决定了是什么样的事件
      action(type,payload), type即action的名字, payload即传递的数据
      combineReducers, combineReducers可以把多个reducer进行合并
      (npm i redux-thunk -S) 在rudex中进行异步(如网络请求)的中间件
      compose, 应用于有多个中间件时
      applyMiddleware, 应用中间件
       */
      /*
      import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
      import thunk from 'redux-thunk';
      import axios from 'axios';
      const counterReducer = function(state={count:1}, action) {
        switch (action.type) {
          case 'COUNT_ADD':
            return {
              ...state, count: state.count + 1
            };
          case 'COUNT_REDUCE':
            return {
              ...state, count: state.count - 1
            };
          default:
            return state;
        }
      };
      const postReducer = function(state={list:[]}, action) {
        switch (action.type) {
          case 'POST_LIST':
            let newList = state.list;
            newList.push(action.payload);
            return {
              ...state, list: newList
            };
          default:
            return state;
        }
      };
      const rootReducer = combineReducers({
        counter: counterReducer,
        post: postReducer,
      });
      const store = createStore(
        rootReducer,
        compose(
          applyMiddleware(...[thunk]),
          window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
        ),
      );
      console.log(store.getState());
      store.dispatch({
        type: 'COUNT_ADD',
        payload: {},
      });
      console.log(store.getState());
      store.dispatch(async function(dispatch) {
        const url = '';
        const response = await axios.get(url);
        dispatch({
          type: 'POST_LIST',
          payload: response.data,
        });
      });
       */
      /*
      模块化:
        -- @
           -- actions
              -- COUNT_ADD_action.js
              -- COUNT_REDUCE_action.js
              -- POST_LIST_action.js
           -- reducers
              -- root_reducer.js 合并reducer并导出rootReducer
              -- counter_reducer.js
              -- post_reducer.js
           -- services 导出网络请求的promise
           -- store.js 创建store, 加入中间件, 并导出
           -- index.js 导入store.js
       */
      /*
      npm i react-redux -S 将react和redux结合起来
      index.js和redux连接
      import { Provider } from 'react-redux';
      import store from './store.js';
      ReactDOM.render(
        <Provider store={store}><App /></Provider>,
        document.getElementById('root')
      );
      组件和redux连接
      import { connect } from 'react-redux';
      const XXX =  class XXX extends React.Component {

      }
      const mapStateToProps = (state, ownProps) => {
        return {
          post: state.post // this.props.post可获取
        };
      };
      
      export default connect(mapStateToProps)(XXX);
      class组件中使用dispatch: this.props.dispatch
       */
  </script>
</body>
</html>