React学习笔记2-Function Component

Function Component

学无止境。——荀子

接着学习一下React的function component。

之前React主要通过class的方式来构建UI组件，但是可能在很多项目中存在一些弊端。Facebook设计了React Hook的方式，可以不通过class的方式来完成同样的功能。也就是只需要通过function component即可，这样带来的好处是代码更简单，bug更少。

简单的Component

先看看一个简单的function component:

import React from 'react';

function Welcome({name}) {
  return 
{name}
;
}

function App() {
  return (
    
  );
}

export default App;

这里Welcome({name})用到了destructing解析赋值的语法。

Component组合

function component 可以组合， 把之前做的问卷调查小Demo重构一下：

import React, { useState } from 'react';


function Question({question, name, change}) {
  return (
    

      {question}
      
      超级满意
      
      比较满意
      
      满意
      
      不满意
      
      超级不满意
    
  );
}

function SimpleSurvey({questions}) {


  let result = [];

  for (let q in questions) {
    result.push(0);
  }

  const handleChange = (e) => {

      let index = questions.indexOf(e.target.name);

      result[index] = e.target.value;

  };

  const onSubmit = (e) => {

    e.preventDefault();

    console.log(result);
  }

  return (

    


      {
        questions.map(q=> )
      }

      

    

  );
}

function App() {
  return ;
}

export default App;

参考阅读

• https://reactjs.org/
• https://blog.csdn.net/starshus/article/details/104393826