小编tri*_*ixn的帖子

我现在对新反应挂钩 API 的用例以及你可以用它做什么感到非常惊讶.

在试验期间出现的一个问题是,在使用时总是创建一个新的处理函数以便抛弃它是多么昂贵useCallback.

考虑这个例子:

const MyCounter = ({initial}) => {
    const [count, setCount] = useState(initial);

    const increase = useCallback(() => setCount(count => count + 1), [setCount]);
    const decrease = useCallback(() => setCount(count => count > 0 ? count - 1 : 0), [setCount]);

    return (
        <div className="counter">
            <p>The count is {count}.</p>
            <button onClick={decrease} disabled={count === 0}> - </button>
            <button onClick={increase}> + </button>
        </div>
    );
};

虽然我将处理程序包装成一个useCallback以避免在每次渲染时传递一个新的处理程序,但仍然必须创建内联箭头函数,以便在大多数情况下抛弃它.

如果我只渲染一些组件,可能不是什么大问题.但如果我这样做了1000次,对性能的影响有多大？是否有明显的性能损失？什么是避免它的方法？可能是一个静态处理程序工厂,只有在必须创建新处理程序时才会调用它？

在我们公司，我们喜欢编写 django 驱动的应用程序，我们也喜欢使用 React。最近，我们考虑为 Python 编写一个基于组件的模板引擎，其中可以使用 JSX 将模板编写为类似 React 的组件。

理想情况下，应该可以将 JSX 嵌入到 python 代码中，以便您可以编写如下组件：

在header.pyx：

import PyReact
from my_awsome_project.components import Logo, Link


def Header(context):
    page_title = context.get('page_title')
    links = context.get('links')

    return (
        <div>
            <Logo /> 
            {page_title}
            <ul>
                {[<Link href={link.url}>{link.title}</Link> for link in links]}
            </ul>
        </div>
    )

这当然需要首先转译文件以获得有效的 python 代码。它会转换为有点类似的东西：

import PyReact
from my_awsome_project.components import Logo, Link


def Header(context):
    page_title = context.get('page_title')
    links = context.get('links')

    return (
        PyReact.createComponent('div', context, [
            PyReact.createComponent(Logo),
            page_title,
            PyReact.createComponent('ul', context, [
                 [
                      PyReact.createComponent(Link, {'href': …

我正在我的 React 应用程序中准备微调器。

它工作得很好。但是，一些 UX 提示说，应该在等待一段时间后显示 spinner/loader/etc。对于这个例子，假设它应该是 750 毫秒。

如何节流/去抖动（我仍然不确定有什么区别）重新渲染组件？

在上面的例子中，加载状态不应该在任何时候出现。

如果当前页面是site.com/one并且我正在点击<Link to='/one'>One</Link>，它会在每次点击时将新项目推送到历史记录（但位置不会改变）。如何防止？这真是愚蠢的行为。

const httpLink = createHttpLink({
  uri: 'http://localhost:3090/'
})

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

client.query({
  query: gql`
    query users {
        email
    }
  `,
})
  .then(data => console.log(data))
  .catch(error => console.error(error));

从客户端代码获取时，此查询会出错，但是当我在浏览器中的http://localhost:3090/graphql上执行此查询时，它会正确获取数据

我正在研究SVG的一些基本图像处理,并试图找到以下挑战的最佳方法:

我们有一个SVG文件,它有各种SVG元素(圆形,矩形,三角形).它们彼此重叠,形成了不同形式的新"区域"(见图).

所以填充实际元素 - 没有问题.但是,如果我只想填充特定的交叉区域的颜色呢？

我目前的想法是:

• 考虑将所有元素绘制为路径,然后查看是否可以将整体构图视为一个大路径,然后使用填充规则.
• 考虑计算区域形状并在其上绘制新形状,然后填充它.

• 考虑其他事情？

  区域的例子

给定一个对象可以是类似dict或类似数组的对象的嵌套结构.在给定虚线路径作为字符串的情况下,在该对象上设置值的pythonic方法是什么？

例:

obj = [
    {'a': [1, 2]},
    {'b': {
        'c': [3, 4],
    }},
]

path = '1.b.c.0'

# operation that sets a value at the given path, e.g.
obj[path] = 5

# or
set_value(obj, path, 5)

上面的调用/赋值应该3用a 替换示例中的5.

注意:路径可以包含列表索引和键.对象的每个级别可以是一个array或一个dict或类似的行为.

解决方案应该与npm包object-path在javascript中的工作方式大致相同.

我将用户列表作为道具传递给 UserItem 组件以迭代用户列表并将它们显示在表格上。列表显示正确，我的渲染返回中没有任何 div，但我仍然收到错误：index.js:1446 警告：validateDOMNesting(...): 不能作为 .

尝试了许多网上找到的解决方案，但没有一个奏效

用户管理代码：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from './common/Spinner';
import { getUsers } from '../actions/userActions';
import UserItem from './UserItem';

class UsersManagement extends Component {
  componentDidMount() {
    if (!this.props.auth.isAuthenticated) {
      this.props.history.push('/login');
    }
    this.props.getUsers();
  }

  render() {
    const { users, loading } = this.props.user;
    let usersList;
    if (users === null || loading) {
      usersList = <Spinner />
    } else {
      if …

正如标题所说，我试图从子组件调用放置在父组件中的方法 (componentDidMount) - 我的应用程序中有以下组件结构：

export default class Today extends Component {
    constructor(props) {
        super(props);
        this.state = {
            stats: [],
            loading: true
        };
    }

    componentDidMount() {
        axios.get(api_url)
            .then((res) => {
                console.log('res.data');   
                this.setState({ 
                    stats: res.data,
                    loading: false
                });
            })
    }

    render() {
        return (
            <Stats loading={this.state.loading} stats={this.state.stats} />
        );
    }
}

和

export default class Stats extends Component {

    constructor(props) {
        super(props);

    }

    onRefresh() {
        alert('X');
        // here I need to refresh the data in 'this.props.stats'
        // and re-display it (fresh data) …

这是组件：

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';

class DatePickerCreater extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <DatePicker
                disabled={this.props.answer.isDisabled}
                dateFormat="YYYY/MM/DD"
                selected={Date(this.props.answer.value)}
                onChange={(e) => this.props.blurHandler(e.target.value,this.props.answer)} 
            />
        );
    }
}

export default DatePickerCreater

当我尝试渲染它时，它什么也没有显示...

非常感谢每个答案！