[React log] Component, props, state

4029 ワード
テキストリンク
ES 6実践
let : block scope. ゲート、whileゲートなどの関数にのみ適用されます.
closure:関数の作成時の外部変数を覚えて、作成後にアクセスを続行します.
シースシース:変数宣言のみを上部に配置
Component & props & state
componet:JavaScript関数と概念的に似ています.propsという入力を受信すると、画面上の表示方法を説明するreact elementが返されます.(要素はコンポーネントのコンポーネント)
function welcome(props){

return <h1>hello<h1>

}
props:読み取り専用(内部では変更できない)一方向データストリーム+属性を表すデータ.構成部品から構成部品に渡されるデータは、構成部品のプロパティです.構成部品をロードおよび使用する親構成部品でのみ設定できます.
個別に指定しない場合は、defaultPropsを設定して値を指定できます.
props.children:構成部品ラベル間の内容のチェックを許可
宣言
ex)素子名Dog,属性(props)はnameとageである.
//文字列の場合、それ以外はすべて括弧で囲まれます.
function Dog(props){

return{

<div>{props.name}</div>
<div>{props.age}</div>

}

}
*proptypes:構成部品のpropsタイプまたは必須値を指定します.
Component.propTypes = 

{ name: PropTypes.string.isRequired, 

version: PropTypes.number };
state:データのみ書き込みます.propsと異なり、値を変更する必要がある場合.値を保存または変更できるオブジェクト.
-class:usState関数、hookを使用
-function:構成部品自体にstateがある
1)コンストラクション関数(コンストラクション関数)で初期化する必要があります.
2) this.stateを使用してstateオブジェクトの初期値設定をクエリーできます.state値を変更するとthisします.setStateを使用します.
class ClassExample extends React.Componet {
  
  constructor(props){
  
  super(props);
  
  this.state = { //state 초기값 설정
  
  count : 0
  
  };
  
  }
  
  
  render(){
  
  const {count} = this.state; //state 조회
  return(
  
  <div>
    <p>you clicked {count} times</p>
    <button onClick = {() => {
      
      
      this.setState({
      
      count : count +1});
      
      }}> Click </button>

            } </div> );
 
  }
  
  }
  
  }
hook:関数形式の素子で使用されるいくつかの技術.useState, useEffect...
useState : this.stateとthis.置換setState
ソース:https://velog.io/@soyi47/React-Component-props-state
https://velog.io/@soyi47/React-Component-props-state#-function-component%EC%97%90%EC%84%9C-state-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://devbirdfeet.tistory.com/52
Android Vibrator携帯電話の振動機能を実現
this, arrow function