-
Notifications
You must be signed in to change notification settings - Fork 43
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
hook似乎不应该返回一个组件 #10
Comments
新的方式是采用 #7 ,分为 hooks 返回一个组件只是让了让开发者更方便。
这个是有解的。还没有去为性能做优化。
看看是否报错呢 |
报错是我这边环境的问题,已经解决了。 |
嗯,之前的方式就是这样的,但是不是很方便。才会用这个方式。
这个是有方法的,不会动态生成新的组件。 |
这里其实就是把业务受控组件概念和hook一起结合使用,API 对用户而言最友好,不需要再去感知一些 数据和ui的bind过程。至于动态生成新组件,可以通过条件记忆的方法尝试解决,让行为 make senese |
通过缓存之类的方法大概可以保证hook函数返回的组件类是同一个类,但我觉得类似的方式都比较hack,就像是在render函数里调用 |
@twisger react 的 hooks 本质也是在 function component 里做了记忆化,只是官方表达这个概念的时候用了 |
更新了代码,应该也没有很 hack。 |
@JIACHENG9 |
这个就是这样设计的。 |
|
search 跟 defaultPageSize 都设计为初始传入的,你想外层动态去修改一个 search 方法?在这里 search 就是传入的使用方法,要做不同的处理是在search 里而不是外层传入不同的方法。 你可举例具体应用场景跟码说明问题。 |
确实会有问题,现在返回的组件相当于是一个非受控组件, |
我自己目前实践下来更倾向于这种写法: import { Table, SearchForm, useList } from './List';
export default () => {
const [searchForm, list] = useList();
return (
<>
<SearchForm {...searchForm} />
<Table {...list} />
</>
)
} |
这里有两个维度,一个是设计,一个是怎么做受控。 设计层面,使用 useFormTable(config),这里的 config 设计上为初始配置,比如之前说到的 search,不会去使用 config.search = value,之后修改 value 这里让修改,可理解为都是 defaultValue。在这里去做受控会让使用复杂。这个是设计层面。 另外个层面是怎么在 config 里传入受控的value,比如 pageSize。只需要加到 store 里即可,也没有复杂跟 hack,也不会重新返回新的组件。只是 useFormTable 没有在 config 里加上 pageSize。这里会想想设计上是否需要,要是需要加上即可。 |
这个在为什么有 sunflower 里有说明,useFormTable 会给出所有不需要用 HOC 的方法跟状态,用户可手动去做绑定,而只是更多的给出了帮用户绑定了的组件,是可选择不用的。 |
引用自官方文档对useMemo的说明,看了一下store的实现,似乎也依赖于useCallback。 |
这个讨论其实也分两个维度 1 要不要返回 HOC 对于1,可持续讨论。 |
进一步, 为什么要 在 这里 use呢? 把获取数据放到 SearchForm 内部如何? |
我自己尝试按照这个思路实现了一下搜索业务,发现存在一个问题,每次render的时候使用的都是不同的组件,更详细的内容可以参考这个讨论。
另外useSearchResult的源码似乎有问题,useEffect等hook应该只能在纯函数组件的函数体中调用,我尝试源码中的写法会直接报错。
The text was updated successfully, but these errors were encountered: