React Native - State vs Props

Code mẫu về React Native - State và Props. Test với http://facebook.github.io/react-native/docs/tutorial

Attributes 1

Cơ bản về 1 Component với attribute content.

123456789101112131415161718import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

export default class LogoScene extends Component {
  constructor() {
    super();
    this.content = "Hello";
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Button title="Say" />
        <Text>{this.content}</Text>
      </View>
    );
  }
}

Attributes 2 - changeContent

Thêm phương thức thay đổi nội dung.

1234567891011121314151617181920212223import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

export default class LogoScene extends Component {
  constructor() {
    super();
    this.content = "Hello";
    this.changeContent = this.changeContent.bind(this);
  }
  
  changeContent() {
    this.content = "Goodbye";
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Button title="Say" onPress={this.changeContent} />
        <Text>{this.content}</Text>
      </View>
    );
  }
}

State 1

Sử dụng state và mối liên hệ với Render.

1234567891011121314151617181920212223import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

export default class LogoScene extends Component {
  constructor() {
    super();
    this.state = { content: "Hello" };
    this.changeContent = this.changeContent.bind(this);
  }
  
  changeContent() {
    this.state.content = "Goodbye";
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Button title="Say" onPress={this.changeContent} />
        <Text>{this.state.content}</Text>
      </View>
    );
  }
}

State 2 - this.setState

1234567891011121314151617181920212223import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

export default class LogoScene extends Component {
  constructor() {
    super();
    this.state = { content: "Hello" };
    this.changeContent = this.changeContent.bind(this);
  }
  
  changeContent() {
    this.setState({ content: "Goodbye" });
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Button title="Say" onPress={this.changeContent} />
        <Text>{this.state.content}</Text>
      </View>
    );
  }
}

State 3 - Async 1

123456789101112131415161718192021222324import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

export default class LogoScene extends Component {
  constructor() {
    super();
    this.state = { content: "Hello" };
    this.changeContent = this.changeContent.bind(this);
  }
  
  changeContent() {
    this.setState({ content: "Goodbye" });
    console.log(this.state.content);
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Button title="Say" onPress={this.changeContent} />
        <Text>{this.state.content}</Text>
      </View>
    );
  }
}

State 3 - Async 2 - Callback

12345678910111213141516171819202122232425import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

export default class LogoScene extends Component {
  constructor() {
    super();
    this.state = { content: "Hello" };
    this.changeContent = this.changeContent.bind(this);
  }
  
  changeContent() {
    this.setState({ content: "Goodbye" }, function() {
        console.log(this.state.content);
    }).bind(this);
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Button title="Say" onPress={this.changeContent} />
        <Text>{this.state.content}</Text>
      </View>
    );
  }
}

Props 1

Truyền dữ liệu vào component với props.

12345678910111213141516171819202122232425262728class Greeting extends Component {
  constructor() {
    super();
  }
  
  render() {
    return (
      <>
        <Text><b>PROPS</b></Text>
        <Text>{this.props.content}</Text>
      </>
    );
  }
}

export default class LogoScene extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Greeting content="Hello Props" />
      </View>
    );
  }
}

Props 2 - State & Props

1234567891011121314151617181920212223242526272829303132import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

class Greeting extends Component {
  constructor() {
    super();
  }
  
  render() {
    return (
      <>
        <Text><b>PROPS</b></Text>
        <Text>{this.props.content}</Text>
      </>
    );
  }
}

export default class LogoScene extends Component {
  constructor() {
    super();
    this.state = { content: "Hello Props" };
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Greeting content={this.state.content} />
      </View>
    );
  }
}

Props 3 - State & Props

1234567891011121314151617181920212223242526272829303132333435363738import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

class Greeting extends Component {
  constructor() {
    super();
  }
  
  render() {
    return (
      <>
        <Text><b>PROPS</b></Text>
        <Text>{this.props.content}</Text>
      </>
    );
  }
}

export default class LogoScene extends Component {
  constructor() {
    super();
    this.state = { content: "Hello Props" };
    this.changeContent = this.changeContent.bind(this);
  }
  
  changeContent() {
    this.setState({ content: "Goodbye Props" });
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Button title="Say" onPress={this.changeContent} />
        <Greeting content={this.state.content} />
      </View>
    );
  }
}