标签: react-state-management

我有一个或多或少结构如下的表单页面：

<Layout>
  <Page>
    <Content>
      <Input />
      <Map />
    </Content>
  </Page>
  <Button />
</Layout>

Map 组件应该只渲染一次，因为在渲染时会触发一个动画。这意味着内容、页面和布局根本不应该重新渲染。

当输入为空时，应禁用布局内的按钮。Input 的值不受 Content 控制，因为状态更改会导致重新渲染 Map。

我尝试了一些不同的东西（使用 refs、useImperativeHandle 等），但没有一个解决方案让我感觉很干净。在不更改布局、页面或内容状态的情况下，将输入状态连接到按钮状态的最佳方法是什么？请记住，这是一个相当小的项目，代码库使用“现代”React 实践（例如钩子），并且没有像 Redux、MobX 等那样的全局状态管理。

我想显示选中的复选框项目，为此我正在使用material-ui checkbox。

现在，我只能显示带有复选框的项目，但不能显示所选的项目。

我知道这很容易，但是我是ReactJS和Redux的新手，所以很难启动。

希望能有所帮助。

谢谢。

this.state = {
            data: [apple, kiwi, banana, lime, orange, grape],
        }}
    handleCheck(x) {
        this.state.checkedValues.push(x);
    }
render(){
       {this.state.data.map((x) =>
             <Checkbox
               label={x} key={x.toString()}
               onCheck={() => this.handleCheck(x)}
               checked=true
              }/>
          )}}

我正在尝试使用react-chartjs-2更新我的图表.我正在使用日期选择器来过滤不同的数据并相应地重新渲染图表,例如今天,昨天,过去7天等显示数据.数据是从我的数据库中提取的

但是,当图表被重新绘制并重新渲染时,它会被添加到我不想要的状态.我只想重新渲染请求不重新渲染的新数据,并添加到图表中的旧数据中.

我之前使用vanilla JavaScript修复了这个问题,因为我没有使用反应我使用destroy()了图表文档说使用的方法,但我不确定如何使用它与反应？

因此,经过进一步检查,我的图表似乎正在重新渲染.但是,当它被重新渲染时,额外的数据被添加到我不想要的我的chartData状态,我只是想要请求的新数据显示在图表上.我还在努力想出那个部分.

这是我的代码我有很多,所以我只会显示相关的部分:

import React from "react";

import reportsService from "../../services/reportsService";
import update from "react-addons-update";
import moment from "moment";

import { Bar } from "react-chartjs-2";
import "chartjs-plugin-labels";
import "chartjs-plugin-datalabels";

class Reportspage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      chartData: {
        labels: [],
        datasets: [
          {
            //label: "Quotes",
            data: [],
            backgroundColor: []
          }
        ]
      }
    };
  }

  chartColors() {
    let colors = [];
    for (let i = 0; i < 100; i++) …

我已经创建了一个自定义的Activity Indicator类,我想从我使用它的地方控制它的隐藏/显示.

这就是我所做的.

CustomActivityIndi​​cator.js

    import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import colors from '../../../styles/colors';
import { consoleLog } from '../../../utils/globalFunctions';

const { width, height } = Dimensions.get('window');

export default class CustomActivityIndicator extends Component {

    constructor(props){
      super(props);
      this.state = {
        show: this.props.show       
      }
    }

    static getDerivedStateFromProps(nextProps, prevState) {

      let outObj = {};
      consoleLog('Login - nextProps.show - ' + nextProps.show + ' prevState.show - ' + prevState.show);    
      if(nextProps.show !== prevState.show) …

我很好奇setState作为道具传递给孩子（哑组件）是否违反了任何“最佳实践”或会影响优化。

下面是一个例子，我有父容器的传球state和setState两个子组件，其中，子组件会调用该setState函数。

我没有明确调用setState孩子，他们引用一个服务来处理状态属性的正确设置。

export default function Dashboard() {

    const [state, setState] = useState({
        events: {},
        filters: [],
        allEvents: [],
        historical: false,
    });


    return (
        <Grid>
            <Row>
                <Col>
                    <EventsFilter
                        state={state}
                        setState={setState}
                    />
                    <EventsTable
                        state={state}
                        setState={setState}
                    />
                </Col>
            </Row>
        </Grid>
    )
}

仪表板 setState 服务示例

function actions(setState) {
    const set = setState;
    return function () {
        return ({

            setEvents: (events) => set((prev) => ({
                ...prev,
                events,
            })),

            setAllEvents: (allEvents) => set((prev) => …

我目前正在创建一个 React Native 应用程序，但仍然不确定如何最好地处理我的用例的状态。

我用来react-native-svg在应用程序中创建一个相当复杂的图形，它存储在一个组件中，保持不变并在父组件中检索。然后这个父组件在画布上有规律地旋转和平移，但复杂图形的路径不会改变。因此，由于计算量相当大，我只想在应用程序开始时计算该图形的 SVG 路径，而不是在我旋转或平移父组件时计算。目前，我的代码结构如下所示：

图形组件

const Figure = (props) => {
    const [path, setPath] = useState({FUNCTION TO CALCULATE THE SVG PATH});

    return(
        <G>
            <Path d={path} />
        </G>
    )
}

父组件

const Parent = (props) => {
    return (
        <View>
            <Svg>
                <G transform={ROTATE AND TRANSFORM BASED ON INTERACTION}>
                    <Figure />
                </G>
            </Svg>
        </View>
    )
}

如您所见，我使用了路径数据的状态。我现在的问题：

1. 我是否在这里确保此路径仅在开始时计算一次？
2. 有没有更优雅/更好的方法来做到这一点（例如，我现在根本不使用 setter 函数，所以我觉得这不是最佳做法）

编辑：

计算路径的函数取决于我从父组件传递的一些道具。

如果您想以一种固执己见的方式使用 mobx 进行状态管理，则官方 Mobx 页面上推荐了这两种方法。

基于这些（1、2 ）， keystone看起来像是状态树的改进。拥有状态树所拥有的一切以及更多。我在任何地方都找不到状态树具有而梯形图没有的任何东西。

我发现 keystone 远没有 state-tree 那么成熟。这可能是阻止我选择它的主要原因。状态树相对于梯形校正还有哪些优点？

PS 它将在 React 应用程序中使用。

我正在开发一个具有快速变化状态和许多广播的网站，并且我正在尝试使用钩子和上下文创建自己的全局状态管理。我发现避免无用渲染的唯一解决方案是为每个状态创建两个上下文，一个用于状态更新器方法，一个用于状态本身。我最终得到了几十个上下文。

它看起来不像是一个好的设计，但我没有任何其他想法，我仍然认为可以创建一个复杂的反应应用程序，而无需第三方库来处理状态管理。

您有什么建议吗？谢谢

我使用 Zustand 进行状态管理。目前，我有20片。而且切片的数量恐怕会增加三倍。最好的方法是什么，将一个非常大的状态拆分为切片或创建多个存储（如果需要，将每个存储拆分为切片）？对于一个大国来说，每种方法的利弊是什么？

*我在react应用程序中创建了2个Zustand存储，一个称为UserStore，另一个称为SettingsStore，如何获取从UserStore到SettingsStore的状态？*

import create from 'zustand';

const UserStore = (set, get) => ({

user: {},

});

我想将此“用户”变量用于我的另一个名为 SettingsStore 的商店

import create from 'zustand';

const SettingsStore = (set, get) => ({



});