reflect

@效應器/反射

☄️將效應子存儲附加到無鉤子的反應組件中。

安裝

npm install @effector/reflect
# or
pnpm add @effector/reflect

入門| API文檔

動機

反思有什麼意義？

正是API設計，使用經典的HOC狀模式，您可以以有效且可組合的方式與效應器編寫React組件。

 import { reflect , variant } from '@effector/reflect' ;

export function UserForm ( ) {
  return (
    < FormCard >
      < Name />
      < LastName />
      < SubmitButton />
    </ FormCard >
  ) ;
}

const Name = reflect ( {
  view : Input ,
  bind : {
    value : model . $name ,
    onChange : model . nameChanged ,
  } ,
} ) ;

const LastName = reflect ( {
  view : Input ,
  bind : {
    value : model . $lastName ,
    onChange : model . lastNameChanged ,
  } ,
} ) ;

const SubmitButton = reflect ( {
  view : Button ,
  bind : {
    type : 'submit' , // plain values are allowed too!
    disabled : model . $formValid . map ( ( valid ) => ! valid ) ,
    onClick : model . formSubmitted ,
  } ,
} ) ;

在這裡，我們將該組件分為小零件，這些部分是使用reflect運算符以方便的方式創建的，這是對props -> values映射的非常簡單的描述，這更容易讀取和修改。

借助@effector/reflect ，我們的$formValid更新只會導致提交班頓重新渲染，對於我們<UserForm />的所有其他部分，實際上將有零react的工作。

要了解更多信息，請閱讀完整的動機文章。

發布過程

1. 查看草案發布。
2. 所有PRS都應具有正確的標籤和有用的標題。您可以在此處查看可用標籤。
3. 更新PR和標題的標籤，接下來，手動運行發行起草動作以再生草案發行版。
4. 查看新版本，然後按“發布”
5. 如果需要，請檢查“為此版本創建討論”