一年多不用react, 他的进步很明显

function组件是react推荐的写法
//组件使用函数写法, 不要使用class写法
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
时代在进步state也可以用function写法了
import style from  "./style.module.sass"
import React, { useState }  from 'react'
import ReactDOM from 'react-dom'
export Hello = (props) ->
	[count, setCount] = useState(0)
	<div className={style.moduleclass}>
		<h1>props hello hahaha oeuaoeu {props.name}</h1>
		<p>You clicked {count} times</p>
      <button onClick={ -> setCount count + 1}>
        Click me
      </button>
  </div>

ReactDOM.render	<Hello name="天才"/>,document.getElementById('reactcontainer')
  • react的层次概念其实有点烦, 想想传递参数要一层层传递下去.
  • 牛啊, 即便不用hooks, 也可以functional的写react. 不过要用prototype而已. 语法上面比较唠叨, 语法糖还是需要的.

特别重要: 不要在这个组件函数中直接进行setstate函数操作, 这样会导致循环调用. 只做初始化, 如果初始化比较复杂, 也先做好, 再声明state以及初始值.

functional component 如何在循环中传递参数?
  • 立即执行函数返回处理函数, 这个写法是OK的示例如下
onClick = (n, x) -> ->  #这里返回事件的处理函数
  setcheckindex n 
  x() 
<Boxr key={x.text} check={checkindex==n} text={x.text} 
  onClick={onClick(n, x.onClick)} #这个写法是关键, 这里有一个立即执行的函数, 他返回事件处理函数, 这样参数就保留在了这个处理函数的外部作用域. 就避免了for循环只有最终循环终点值生效的问题.

  • data-xxx的写法没有试验成功.

    data-index={n} data-fun={x.onClick} /> for x,n in g# 这个没有用, 函数中没有拿到.

  • 胖箭头函数也没有成功

  • let声明循环变量的方法没有尝试

react每个组件都必须单根
  • 不是单根也默默地不报错, 但是, 就是执行就很诡异…., 2020年11月, 只处理最后一个元素.
非受控组件
  1. 可以用ref引用组件的值.
  2. 但是如果你想像我一样使用fileinput: 当用户拖入文件时, 立刻对用户操作进行响应, 那么除了响应onchange, 貌似也没有其他方法了.
用对象做state必须注意
  • https://stackoverflow.com/questions/57035092/react-hooks-usestate-is-not-consistent-with-object
# 点击测试
[object, setObject] = useState  count: 0
onClick = ->
  setObject (old) ->
    old.count = old.count + 1
    old
<div>
<p>You clicked {object.count} times</p>
<button onClick={-> console.log(object.count)}>Show in log</button>
<button onClick={onClick}>'这里不刷新'</button>
</div>
  • 原因是对象的属性更新了, 对象没更新. 所以要用…解构一个新的对象返回
hook 解析对象很神奇
  • 他会自动解构数字索引
[k2status, setk2status]= useState {
		point: false # 基础点显示
		order:false # 3个task是否显示
		site: false
		courier: false
		([x.id]:false for x in apis)...
}
# 这个会自动把初始值的数字索引转化拆包
# 原始的初始值
{"0":{"王老师规划daughter":false},"1":{"李老师分配group":false},"2":{"陈老师线路train":false},"point":false,"order":false,"site":false,"courier":false}
# 转化之后的初始值
{"point":false,"order":false,"site":false,"courier":false,"王老师规划daughter":false,"李老师分配group":false,"陈老师线路train":false}
# 此时原本的数字索引0, 1, 2, 都不见了, 被拆包了
如何避免effect在加载时触发
useEffect ( ->
  if isfirst.current then isfirst.current=false else i.onClick? check
          ),[check]
effect可以保证在组件销毁时, 做清除操作
useEffect ( ->
  -> clearmap 0 # 返回函数可以保证销毁时执行
),[clear]
组件本身是没有状态的
  • 各种state和props的变化都会导致组件刷新. 因此才有状态管理这种玩意.
  • 最简明的做法是把状态放到单独的js文件中, 然后import, 这就相当于弄了一个全局变量, 不过这个变量有很不错的作用域限制.
参考
  • https://coffeescript-cookbook.github.io/chapters/arrays/concatenating-arrays