React入門ノート

5039 ワード
javascript 先端 react.js
JSX
一.導入方法
  • CDN導入(不推奨)
  • create-react-ap 
    $ yarn global add create-react-app
$ create-react-app demo
$ cd demo
$ yarn start
    • 二.構文const element = hello world 3.注意事項
  • class Nameではなく、クラス
    • です.
  • 変数ラベルに挿入されたすべての変数は{}で包まれます.
  • 変数nが必要ならば{n}
    • に書く.
  • 対象が必要なら、{ { name:"oliver" } }
    • と書く.
  • リセットの後は必ず()
    const App = ()=>{
   return(
       
      App
    
   )
}
//       ，   return undefined;
    • を追加します.
    四.条件判断
  • ReactのJSX完全**はJSの書き方です.
    • 手間を省きたいなら、このように書いてもいいです.
    const App = ()=>{
   return (
       
    
           { n%2==0? 
        
     : 
        
    }
       
    
   )
}
    筋がほしいなら、このように書いてもいいです.
    const App = ()=>{
   const el = n%2==?:
        
     : 
        
    
   return(
       
     {el} 
    
   )
}
    もしあなたが多くの分岐点を判断したいなら、このように書いてもいいです.
    const App = ()=>{
   const el
   if(n==1){ el = 
       
     }
   else if(n==2){ el = 
       
     }
   else if(n==3){ el = 
       
     }
   return (
       
     {el} 
    
   )
}
    五.循環文
  • forサイクル
    •  const App = (props)=>{
    const arr = []
    for(let i=0; i    {i}，  {props.list[i]}
    )
    )
    リターン(
    {arr}
    )
    )
  • 同理forサイクルは
    props.list.map((n,item)=>{
   return  
      {index}，  {n}
    
})
    • に変更できます.
    VueとReactの最大の違いは:
  • あなたはVueであなたに書いたv-xxx
    • を使いたいです.
  • やはりReactを使って自分でJSコード
    • を書きたいです.
    Reactコンポーネント
    一.Element V.S Component
    //    react  （      
const div = 
     element 
    
//    react  （      
const Div = ()=>{
    return 
     component 
    
}
    二.コンポーネントとは何ですか?
  • は、現在のところ、react要素を返す関数として、コンポーネント
    • が挙げられている.
    三.React両コンポーネント(一)関数コンポーネント
    //    
function Welcome(props){
    return 
    Hello, {props.name}
    
}
//
    (二)クラスコンポーネント
    //    
class Welcome extends React.Component {
  render() {
    return 
    Hello, {this.props.name}
    
  }
}
//
    注意してください.関数コンポーネントにはthisがなく、変数とパラメータを使用します.props(外部データ)を追加します.
  • クラス構成要素
    
...
class Demo extends React.component{
   render(
       
       ：{this.props.name} 
    
   )
}
    は、直接属性this.props.xxx
    • を読み取る.
  • 関数構成要素
     
...
const Demo = (props)=>{
   return 
       ：{props.name} 
    
}
    は、パラメータprops.xxx
    • を直接読み出す.
    五.stateを追加する(内部データ)
  • 種類のコンポーネント
  • 読みます.this.state.xxx
  • 書き込み:
      //  1
this.setState({
      n: this.state.n+1
})
  //  2   ！！
this.setState((state)=>{
      const n = this.state.n+1
      return {n}
})
  • set State注意事項:
  • this.setState.n += 1無効
  • setStateは、UIを非同期的に更新し、nの値はすぐには変更されない.オススメsetState((state)=>{return{...}})関数方式
  • これは関数式の理念です.
  • 関数構成要素は、React HookのAPIを使用してuseStateで配列に戻り、第一項は読みに用い、第二項は
    const [n, setN] = useState(0);
...
return (
   
    {n}
    
   

)
...
    • を書くために用いられる.
  • 複合データのstate
  • 種類のコンポーネントのset Stateは、第1層の属性
    this.state={ m:0, n:0 }
...
this.setState( {n:0} )  //    m    ，      m undefined
    • を自動的にマージする.
  • 種類のコンポーネントの第二層は、「...」
    this.state={
  user:{
      name:"oliver", age:18
  }
}
...
  //    
this.setState({
  user:{
      ...this.state.user,  //          
      age: 19
  }
})
    • を使用します.
  • 関数構成要素は完全に統合されません.データは1階のみの場合はそれぞれ動作します.
    let [n,setN] = React.useState(0)
let [m,setM] = React.useState(0)
...
  • 関数構成要素が2つある場合、「...」
    let [myState,setMyState] = useState({
      name: "oliver",
      age: 18
})
  //    
setMyState({
      ...myState,
      age: 19
})
    • を使用します.
    イベントバインド
  • 種類のコンポーネントのイベントバインディング
    class App extends React.component{
       //  addN  ，       
   addN = ()=> this.setState({n:this.state.n+1})
   constructor(){
       super()
   }
   ...
}
  • 関数構成要素のイベントバインディングconst App = ()=>{ sayHi = ()=> { console.log('hi') } return ( ) }
    • createElement
  • 最初のパラメータ:
  • 文字列、'div'のような場合、
    • を作成する.
  • 関数(関数構成要素)は、関数を呼び出し、戻り値を最初のパラメータ値
    • として取得する.
  • クラス(クラス構成要素)の場合、newはクラスの一例であり、インスタンスrender()を呼び出して、戻り値を最初のパラメータとして取得する.
  • JSX文法における等価はReact.createElement('div')
    • である.
    eclipse設定extjsコード自動提示