react-基础-01

vue tutorial 上的小demo 改用react 写法

属性绑定

<div className={xx}></div>

事件绑定

import React, { useState } from 'react';

export function App(props) {

  const [count, setCount] = useState(0)
  function add() {
    setCount(count + 1)
  }
  return (
    <div className='App'>
      <button onClick={add}>add {count}</button>
    </div>
  );
}

双向绑定

import React, { useState } from 'react';

export function App(props) {

  const [val, setVal ] = useState('abc')
  return (
    <div className='App'>
      <input value={val} onChange={(e) => setVal(e.target.value)}/>{ val }
    </div>
  );
}

条件渲染

import React, { useState } from 'react';

export function App(props) {
  const [awesome, setAwesome] = useState(false)

  return (
    <div className='App'>
      <button onClick={() => setAwesome(!awesome)}>toggle</button>
      {awesome ? <h1 >Vue is awesome!</h1> : <h1>Oh no </h1>}
    </div>
  );
}

列表渲染

import { useState } from 'react'
let id = 0
function App() {

  const [newTodo, setNewTodo] = useState('')
  const [todos, setTodos] = useState([
    { id: id++, text: 'ss' }
  ])

  function addTodo(e) {
    e.preventDefault()
    setTodos([...todos, { id: id++, text: newTodo }])
    setNewTodo('')
  }

  function removeTodo(todo) {
    console.log(todo, todos.filter(i => i !== todo))
    setTodos(todos.filter(i => i !== todo))
  }

  return (
    <div className="App">
      <form onSubmit={addTodo}>
        <input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
        <button>Add Todo</button>
      </form>
      <ul>{
        todos.map(i => {
          return (
            <li key={i.id}>
              {i.text}
              <button onClick={() => removeTodo(i)}>X</button>
              <input />
            </li>
          )
        })
      }
      </ul>
    </div>
  )
}

export default App

8. 计算属性

react没有计算属性的概念, 但是可用 useMemo替代

const compToggle = useMemo(() => toggleAll ? todos : todos.filter(i => !i.checked)) // ??
setTodos([...todos]) // 
<span className={i.checked ? 'line-trought' : ''}>{i.text}</span> 

9. 生命周期

1. 函数组件没有声明周期

10.监听 useEffect

  useEffect(() =>{
    console.log('useEffect', count)
    console.log('useEffect', person.name) 
  }, []) // 可以添加想监听的变化. 因为监听了两个变量, 所以调用两次??

11. components 组件化

import A from 'a'
<A />

props emits slots

props 直接形参接收, 传方法的话, 子组件调用给父组件传参
父调子的话, useRef ref={}
插槽的话可以用 形参的.children 分: 纯文本, 单标签, 多标签的情况

1. 历史

react 是一个构建界面的js库

1. 13年facebook(现名meta)开源
2. 17年 16 (fiber时间片) (用了两年时间才加入)
3. 19年2月 16.8发布 (hooks)
4. 20年10月 17
5. 22年3月 18

特点

1. 组件化
2. 声明式
3. diffing算法, 虚拟DOM 增加页面更新效率

tips

1. 样式的模块化 a.a
2. promise穿透?
3. umi.js next.js (react的服务端渲染框架)
4. react Devtools 红色的表示是开发环境, 正常的颜色表示是生产环境.
5. uuid nanoid
6. react 跨域, 直接在package.json配置 proxy: “http://localhost:5000” 但是这只能配置一个
   自己没有的才会请求代理,
   src 下面 setupProxy.js
7. 浏览器直接输入地址, 是get
8. 作用域样式: styled-components
9. 高阶函数做登录拦截. PureComponent??

脚手架创建项目

npm install -g create-react-app || yarn global add
create-react-app aa 用脚手架创建了一个叫aa
用了脚手架搭建框架: 模块化 组件化 工程化.
f
componentWillMount和componentWillUpdate这两个函数往往包含副作用，所以当使用React Fiber的时候一定要重点看这两个函数的实现。

1. reconciliation algorithm 和解算法?
2. M nobil prized

浏览器不支持 export default {} => node 不支持 => 基于node的webpack也不支持

HashRouter / BrowserRouter
拆分common/components/Header.js

store/index.js reducer.js 主仓库

1, 样式组件,标签styled-components

import styled from 'styled-components'
export const BookWrap = styled.div`
.box{
	background: red;
}

src/store/reducer.js
const defaultState = {
	meau: [
		{ id: '1', name: '图书管理', icon: 'book'},
		{ id: '2', name: '用户管理', icon: 'user'}
	]
}

export default (state = defaultState, action) => {
	let newState = JSON.parse(JSON.stringify(state))
	switch (action.type) {
		default: ;
		break
	}
	return newState
}

reducer.js
import { combineReducers } from 'redux'
import commonReducer from '../common/store/reducer'
export default combineReducers({
	common: commonReducer,
})

index.js
import { createStore } from 'redux'
import Reducer from 'reducer'
export default createStore(reducer,
	redux的工具代码
)

用户,分类,vip

const a = '
hello
'



使用类就允许我们使用其它特性，例如局部状态、生命周期钩子

受控组件: input随数据变化而变化.

非受控组件: 没用value属性,真实dom控制 用ref代替id


ref={(el) => {this.username = el}}

defaultValue={this.state.username} //非受控组件,设置默认值

defaultChecked

this.refs.username//this.username.value


React.PureComponent(){ 实现简单的性能优化
}

shouldComponentUpadate(nextProps, nextState){
}

state或props变化引起render执行
类定义构造函数,必须先调用父类的构造函数super

props不能修改,state也不允许直接修改,只能做替换.

setState是异步函数,setState合并性.

this.setState((prevState)=>({

conunt: prevState.count + 1;

}, () = > { console.log(11) } )

双向数据绑定




handleChange(e) {

	const value = e.target.value;
	
	this.setState( () = >({
	
		inputVal: vale
	
	}))

}

动作派发,换成函数createAction,函数返回对象

事件处理,状态提升

异步处理

1. dispatch之前,做异步操作
2. 借助中间件,让redux支持异步 Middleware