react(一)基础引入

react理解

框架出现之前，如何构建页面

• JS本质，浏览器脚本

1. 可以操作DOM的动态语言
2. 可以完全不写HTML，JS就可以对页面DOM增删改查

const div1 = document.createElement('div');
div1.addEventListener('click', () => {...})
body.appendChild(div1);

基于JS构建DOM

任意标签元素，都可以通过JS创建，那么可以封装一个函数来实现

function createElement(type, params, children){
  let ele;
  if(type.toLowerCase() === 'div'){
    ele = document.createElement('div')
  }
   if(type.toLowerCase() === 'p'){
    ele = document.createElement('')
  }...
  children.forEach(child => ele.appendChild(child));
  
}

react如何实现页面

react早期，就是createElement函数形式，写起来太麻烦，后面用JSX形式

function App(){
   return(
      <div>
        <Header>
           This is React
        </Header>
      <div>
   )
}

@babel/preset-react 会将上面JSX转化,然后再执行

import { jsx as _jsx } from "react/jsx-runtime";
function App() {
  return /*#__PURE__*/_jsx("div", {
    children: /*#__PURE__*/_jsx(Header, {
      children: "This is React"
    })
  });
}

react 和 vue 区别

• vue：

1. 发布订阅，监听状态，状态改变直接修改对应部分
2. 编译型框架，不能直接执行

• react：

1. 从根节点遍历生成虚拟dom，对比找出不同部分，更新
2. 运行时框架，babel转义后可以在浏览器直接执行

react函数为什么要bind(this)

• react函数是延后的，执行的时候可能找不到当前的this，所以需要绑定
• () => {}，使用箭头函数不用bind，箭头函数的this就是代码定义时所在的this

条件渲染列表渲染

• 条件渲染

isShow ? <div>组件展示</div> : <div> 404 </div>

• 列表渲染

{
  list.map(item => <li>item</li> )
}

useEffect

useEffect( () => destory, deps )

• 第一个参数是一个 callback 函数，destory是函数的返回值。destory会在下一次 callback 执行之前调用，用于清除上一次 callback 带来的副作用
• 第二个参数是 数组，数组中的值发生改变，会执行callback 返回的 destory，然后再次执行callback 函数

函数组件模拟生命周期

1. 依赖空数组

useEffect(() => {
   相当于 componentsDidMount;
   return () => {
      componentWillUnMount;
   }
}, [])

2. props变化，执行

useEffect(() => {
   相当于 componentsWillReceiveProps;
}, [props])

3. 没有依赖

useEffect(() => {
   相当于 componentDidUpdate;
})

useState

const [state, setState] = useState(0);

• 直接修改状态，视图不会更新
• setState 用新的状态替换原来的状态

state如果是个对象
setState({ ...state, name:'aaa' })