@52css/weact

Weact

微信js使用react-like语言开发js（只是js部分）

page-demo

整体页面是WPage包裹hook方法，可以使用useState定义数据，onShow、onHide、onLoad、onUnload、onReady、onPullDownRefresh、onReachBottom 控制生命周期

• onShow 如果返回fn 可以出发 onHide执行
• onLoad 如果返回fn 可以出发 onUnload执行

import { WPage, useState, onShow, onLoad } from "../../utils/weact"

WPage(() => {
  const [num, updateNum] = useState(0);
  const [num1, updateNum1] = useState(100);
  const toLogs = () => {
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  }

  onLoad((options) => {
    console.log('page1 onLoad', options)
  })

  onShow(() => {
    console.log('page1 onShow')
    return () => {
      console.log('page1 onHide')
    }
  })

  return {
    num,
    num1,
    toLogs,
    click(e) {
      console.log('e', e.currentTarget.dataset)
      updateNum((num) => num + 1);
    },
    focus() {
      updateNum1(num => num + 3);
    }
  };
})

component-demo

整体页面是WComponent包裹hook方法，可以使用useState定义数据，created、attached、ready、moved、detached、error 控制生命周期

• attached 如果返回fn 可以出发 detached执行

props

需要return

• 支持解构
• 支持解构带默认值

import { WComponent, useState, attached } from "../../utils/weact"

WComponent(({ name, abc = 1 }) => {
  const [count, setCount] = useState(10)
  const bindTap = () => {
    setCount(count => count + 1)
  }

  attached(() => {
    console.log('attached')
  })

  return {
    name,
    abc,
    count,
    bindTap
  }
})

获取this

• 函数不能是佚名函数，不然获取不到this

WPage(function () {
  console.log('page-this', this)
});

WComponent(function () {
  console.log('component-this', this)
});

增加useEffect

WPage(() => {
  useEffect(() => {
    console.log('useEffect, 立即执行')
  })
  useEffect(() => {
    console.log('useEffect, 只执行一次')
  }, [])
  useEffect(() => {
    console.log('useEffect, num变更就执行', num)
  }, [num])
  useEffect(() => {
    const timer = setTimeout(() => {
      setShowText(() => true);
    }, 2000);

    return () => {
      // 页面销毁的时候执行
      clearTimeout(timer);
    };
  }, [])
});

增加useMemo

WPage(() => {
  const [count, setCount] = useState(0);
  const [count1, setCount1] = useState(0);
  const y = useMemo(() => {
    console.log('只有count触发才会更新')
    return count * 2 + 1
  }, [count])

  return {
    count,
    y,
    bindTap() {
      setCount(c => c + 1);
    },
    count1,
    bindTap1() {
      setCount1(c => c + 1);
    }
  }
});

触发

触发方法

WComponent((change = () => {}) => {

  change({hello: '123'});
})

触发props的双向绑定更新

WComponent((props = {visible: false}) => {
  // 手动更新，不能解构visible直接更新
  props.visible = true
})