Question

我创建了useBanner挂钩

public class MainActivity extends AppCompatActivity {

 List<Model> modelList ;
 SectionsPagerAdapter mSectionsPagerAdapter ;

 private interface ItemClickListener {
   void onItemClicked(int position , String newText);
 }





 public static ItemClickListener listener = new ItemClickListener(){

    @Override
    public void onItemClicked(int position , String newText){
        Model model = modelList.get(position);
        model.setText(newText);
        modelList.set(position , model);
        adapter.notifyDatasetChanged();
    }

 }


     @Override
    public void onCreate(args...){
       //init views
       init_adapter();
    }





 private void init_adapter(){
      modelList = new ArrayList<>();
      //Inflate
      modelList.add(new Model(R.drawable.photo0, "Commencer", "", "", "","", 0, ""));
      modelList.add(new Model(R.drawable.photo1, "Ose faire ______ ce que tu redoutais hier.", "Ose faire aujourd'hui ce que tu redoutais hier", "Demain", "Aujourd'hui", "Dans un ans", 2, "01"));
      modelList.add(new Model(R.drawable.photo2, "Ton temps est _____, nattends plus.", "Ton temps est limité, n'attends plus.", "Infinie", "Limité", "Gratuit", 2, "02"));



      mSectionsPagerAdapter = new            
      SectionsPagerAdapter(getChildFragmentManager());


      viewPager = findViewById(R.id.viewPager);
      viewPager.setAdapter(mSectionsPagerAdapter);
      }
  }

我在做正确的事情，而道具却抛出useState。可以使用useBanner。

 public class SectionsPagerAdapter extends FragmentPagerAdapter {

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        YourFragment.newInstance(modelList.get(position) , position);  
    }

    @Override
    public int getCount() {
       return modelList.size();
    }
}

道具何时会在这里改变。将更改useBanner的状态。还是被认为是反模式，我必须在useMemo中写所有这些

const useBanner = (array, yardage) => {
  const [bannArr, setBannArr] = useState(array.slice(0, yardage));
  const [bannListIndex, setBannIndex] = useState(1);

  return {
   ....
  };
};

Answer 1

是的，在React中可以使用自定义钩子。这是讨论custom hooks的单独文档。

但实际上，根据最终目标是什么，您可能需要附加代码。

如果只想一次初始化状态，则在第一次创建组件Banner时，您可以像在第一个示例中那样进行操作
```
const Banner= ({
    array,
    yardage
}) => {
    const { bannForth, bannBeck, bannArr } = useBanner(array, yardage);
    return (
      ...
    );
};
```
这将完美地工作。但是，如果道具array和yardage发生变化，这将不会反映在组件中。因此，props仅会用作初始值一次，即使更改了，也不会在useBanner中使用（而且无论您使用useBanner还是{{1 }}直接）。这个答案highlight就是这个。
如果您想在每次useState更改时更新初始值，则可以像下面这样使用props
```
useEffect
```
在这种情况下，const Banner= ({ array, yardage }) => { const { bannForth, bannBeck, bannArr, setBannArr } = useBanner(array, yardage); useEffect (() => { // setBannArr should also be returned from useBanner. Or bannArr should be changed with any other suitable function returned from useBanner. setBannArr(array.slice(0, yardage)); }, [array, yardage, setBannArr]) return ( ... ); };组件可以控制自身状态，并且当父组件更改Banner时，props组件中的状态将重置为新的Banner。

这里是showcase second option的小样本。

我应该在钩子中使用useMemo吗？

1 个答案: