我的react学习笔记
这个复习笔记估计只有我自己才看得懂
<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>Documenttitle>
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;
;
}
*/
// Link, NavLink
/*
import React from 'react';
import { Link } from 'react-router-dom';
export default function App() {
return
This is App
login
home
;
}
*/
/*
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
params.id {params.id}
count: {count}
}
*/
// 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(