Day 11 state & props -2

第十一天罗～

昨天我们说到 state ， 那我们如何去改变 state 呢？

当我们直接改动 state ， 会发现， 画面根本不会更新

like:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      text: 'hello',
    };
  }

  onPressClickMe = () => {
    this.state.text = 'Wow~';
  };

  render() {
    return (
      <SafeAreaView>
        <View>
          <Button title='Click Me!!' onPress={this.onPressClickMe} />
          <Text>{this.state.text}</Text>
        </View>
      </SafeAreaView>
    );
  }
}

state 的改变需要跟随着 component 的更新流程，这样才会把更新的数据显示在画面上

那如何触发更新流程呢？

setState

更新指定 state ， 并触发 component 的 update 的流程

this.setState(updater, [callback]);

• updater 有两种模式
  • object
    • 是以 key-value 方式来更新指定 state value
  • function
    • 是会接收当下的 state & props ，可以以此为参考基础来进行更新， return object 包裹需要更改的值
• callback 会在更新流程结束後去执行

//object
this.setState({ text: 'hello!' });

//function
this.setState(function (state, props) {
  return {
    text: 'hello',
  };
});

//use callback
this.setState(
  function (state, props) {
    return {
      text: 'hello',
    };
  },
  function () {
    console.log(this.state);
  }
);

所以，我们希望画面随着我们 state 值改变而改变，应该这样做...

like:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      text: 'hello',
    };
  }

  onPressClickMe = () => {
    this.setState(() => {
      return {
        text: 'Wow~',
      };
    });
  };

  render() {
    return (
      <SafeAreaView>
        <View>
          <Button title='Click Me!!' onPress={this.onPressClickMe} />
          <Text>{this.state.text}</Text>
        </View>
      </SafeAreaView>
    );
  }
}

当 component 内部进行更新流程的时候，

就会把底下有使用到的 component 一起更新

props

再来谈到 props ，

当我们在开发时，总会考虑到 component 会在不同的情境上使用，

但是不可能把所有的逻辑都写在 component 里面，

这时我们就必须去靠 props 来让外部有部分的控制权限 ，

那它的特性是：

• 由 开发者 去定义外部能够多大程度去间接影响 component 的运作
• 从外部传入内部的参数都会放进 props 属性里，以物件key-value保存
• 属性是唯读的，不能改动其值，也不应该在内部重新赋值给 props
• 改变 props 值，只有在外部传入的值发生改变时
• 改变时会触发 component 的 update 流程

设定

const TextBox = () => {
  return <Text>{this.props.value}</Text>;
};

使用

const App = () => {
  return (
    <SafeAreaView>
      <TextBox value={'Hello'} />
    </SafeAreaView>
  );
};