Getting a changed variable to show up in `render`

问题: Probably a simple question with a simple answer, but I can't figure this out. Blame the heat. My simulator prints 'this is a test' on the screen, when I want it to say 'cha...

问题:

Probably a simple question with a simple answer, but I can't figure this out. Blame the heat. My simulator prints 'this is a test' on the screen, when I want it to say 'changed'. What am I doing wrong?

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Template from './src/components/Template';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.foo= "this is a test";
  }

  changeMe = () => {
    this.foo = 'changed';
  }

  componentDidMount(){
    this.changeMe();
  }

  render() {
    return (
      <Template foo={this.foo} />
    );
  }
}

回答1:

Use state

You are using a class attribute witch will not trigger a re-render when changed. In react a component will re-render when it receives new props or when the state is changed (there's also a way to force it but best not to do that).

Example using the state to trigger a rerender

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Template from './src/components/Template';

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state ={foo: "this is a test"};
    }

    changeMe = () => {
        this.setState({foo:'changed'})
    }

    componentDidMount(){
        this.changeMe();
    }

    render() {
        return (
            <Template foo={this.state.foo} />
        );
    }
}

When passing new props to a component it will also re-render (unless you implement componentShouldUpdate).

State explanation

So inside a react component you have a local state object in this.state it can be set in the constructor like this.state = {bar: 'foo'};. After the constructor has set the state it should only be changed with the this.setState() method.

Upon changing the state with setState the component will re-render with the updated values.

The state is not available outside of the component, at least not available as this.state because that would call the local state of the current component.

If you need to use a value from the state of a parent component you can pass it to a child. At that point it becomes a prop of the child accessible with this.props

To change the value of state from a child component you should pass a function to the child that changes the state of the parent.

This process of passing state changing functions becomes increasingly complex as your app grows, I would suggest using a library like Redux to manage app state via actions and reducers. There is a steep learning curve but once you have a grasp of this modified flux methodology you will wonder how you ever lived without it.

  • 发表于 2018-07-13 18:58
  • 阅读 ( 254 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除