小编dar*_*urf的帖子

我知道React可以异步和批量执行状态更新以进行性能优化.因此,在调用之后,您永远不能相信要更新的状态setState.但是你可以信任的反应更新相同的顺序状态setState被称为对

1. 相同的组件？
2. 不同的组件？

考虑单击以下示例中的按钮:

1.是否有可能a是假的,b对于:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false, b: false };
  }

  render() {
    return <Button onClick={this.handleClick}/>
  }

  handleClick = () => {
    this.setState({ a: true });
    this.setState({ b: true });
  }
}

2.是否有可能a是假的,b对于:

class SuperContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false };
  }

  render() {
    return <Container setParentState={this.setState.bind(this)}/>
  }
}

class Container …

当向一个PureComponent或功能组件发送 props 时，你可以通过使用不会在每次渲染时改变的 props 来优化性能，这将阻止组件重新渲染。

使用类组件时，这很简单：

class Component extends React.Component {
  render() {
    return <List createRows={this.createRows}/>;
  }

  createRows = () => this.props.data.map(dataToRow);
}

鉴于List是一个PureCompoment或功能组件，createRows道具永远不会导致重新渲染List.

但是如果Component是一个功能组件，这将不再可能：

  function Component(props) {
    return <List createRows={createRows}/>;

    function createRows() {
      return props.data.map(dataToRow);
    }
  }

由于createRows每次Component渲染时都会创建，因此道具会发生变化，导致List每次重新渲染时都会Component重新渲染。这会导致性能的巨大损失。还要注意createRows不能放置在功能组件之外，因为它依赖于 的data道具List。

现在，随着 Hooks 的介绍，可以将 保持createRows在一个useState钩子中：

  function Component(props) {
    const [ createRows …

我有一个使用Hooks的功能组件：

function Component(props) {
  const [ items, setItems ] = useState([]);

  // In a callback Hook to prevent unnecessary re-renders 
  const handleFetchItems = useCallback(() => {
    fetchItemsFromApi().then(setItems);
  }, []);

  // Fetch items on mount
  useEffect(() => {
    handleFetchItems();
  }, []);

  // I want this effect to run only when 'props.itemId' changes,
  // not when 'items' changes
  useEffect(() => {
    if (items) {
      const item = items.find(item => item.id === props.itemId);
      console.log("Item changed to " item.name);
    }
  }, [ items, props.itemId …

在我的应用程序中，到目前为止，我已经使用 OAuth2 密码授予流程为客户端生成 JWT 访问令牌，并使用 Spring Security 和 Spring OAuth 提供用户名和密码。然后，他们在对我的 Spring Boot REST API 的所有请求中使用该令牌。

我的一些客户现在希望改用 SAML 身份验证。我的想法是创建一个单独的端点/saml/accessToken并使用 Spring SAML 保护它。SAML 身份验证完成后，用户将被重定向回/saml/accessToken，现在已进行有效身份验证，并获得一个 JWT，客户端可以使用该 JWT 进一步与我的 REST API 进行通信。

我需要一个控制器方法，它接受经过身份验证的 SAMLAuthenticationToken，使用其凭据生成 JWT，并将其返回给客户端：

@RequestMapping(value = "/saml/accessToken")
public String getAccessToken(SAMLAuthenticationToken authentication) {
    return accessTokenFactory.create(authentication);
}

这就是accessTokenFactory上面例子中我需要帮助的地方。我想尽可能遵循 Spring 编码生态系统，避免使用“hack”解决方案，这样我就可以利用已经存在的 TokenEnhancer 等。

从 SAMLAuthenticationToken 创建 JWT 访问令牌的最佳方法是什么？

在写字

session.createCriteria(Person.class) .add(Restrictions.eq("id", personId)) .setMaxResults(1) .uniqueResult();

比写作更好

session.createCriteria(Person.class) .add(Restrictions.eq("id", personId)) .uniqueResult();

从优化的角度来看？第一个查询会更快吗？

我想要一个未知大小的 SVG 图标居中对齐到某些文本的左侧。我最好想使用flex。

这是 SVG 和文本容器的 CSS：

.container {
    background-color: pink;
    display: flex;
    align-items: center;
    margin: 10px;
    width: 200px;
}

这工作正常：

<div class="container">
  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <rect width="24" height="24"/>
  </svg>
  <div>ALIGNED ICON</div>
</div>

然而，当我将 SVG 包裹在另一个 中时div，它的高度div变得不必要的大，导致 SVG 和文本未对齐：

<div class="container">
    <div>
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <rect width="24" height="24"/>
        </svg>
    </div>
    <div>MISALIGNED ICON</div>
</div>

这是CodePen的链接

实际上，这是一个 React 项目，我使用了我无法控制或不知道其大小的外部 SVG 组件。因此，我无法将任何样式直接应用于 SVG 元素，也无法将包装器div高度设置为与 SVG 的高度相匹配。

将 SVG 包装在另一个 div …

在它的npm 页面中whatwg-fetch说：

导入将自动填充 window.fetch 和相关 API：

import 'whatwg-fetch'

window.fetch(...)

Run Code Online (Sandbox Code Playgroud)

在同一部分的下面它说

要与 webpack 一起使用，请在应用程序入口点之前的入口配置选项中添加此包：

entry: ['whatwg-fetch', ...]

Run Code Online (Sandbox Code Playgroud)

我用webpack.

我应该同时导入它并将其添加为条目，还是条目足够了？

如果我写这样的React类:

class SomeClass extends React.Component {
    state = {
        someState: this.someRegularFunction(),
        someOtherState: this.someArrowFunction()
    };

    someRegularFunction() {
        return "someText";
    }

    someArrowFunction = () => {
        return "someOtherText";
    };
}

Webstorm代码协助警告箭头函数的调用this.someArrowFunction()说:

字段'someArrowFunction'在'state'之后声明,可能尚未分配

如果没有警告常规功能的调用this.someRegularFunction().

Webstorm是正确的,调用时执行失败this.someArrowFunction():

TypeError:_this.someArrowFunction不是函数

我一直在寻找一些解释这种行为的文档,但一直找不到.

为什么在类中声明之前可以调用常规函数,而不是箭头函数？

我有一个 Spring Boot 应用程序设置为 REST api。我现在还希望能够向客户端提供简单的 HTML 页面，而无需在任何模板引擎（如 Thymeleaf）上使用。我希望对 HTML 页面的访问属于 Spring Security 设置的相同安全约束，使用WebSecurityConfigurerAdapter, 已经存在于我的应用程序中。

我试过的是有一个Controller：

@Controller
public class HtmlPageController {
    @RequestMapping(value = "/some/path/test", method = RequestMethod.GET)
    public String getTestPage() {
        return "test.html";
    }
}

并将test.html文件放在/resources/test.html或 中/webapp/WEB-INF/test.html。

每次我尝试访问该页面localhost:8080/some/path/test一个404返回。

我如何使这项工作？