【青训营】-React实战

alexis
392 阅读4分钟

小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金。

React

React是一个基于组件的声明式UI库，用于构建高效、快速的用户界面。

React的特点

  • 声明式写法 你只需要描述UI（HTML）看起来是什么样，就跟写HTML一样，React负责将你写的HTML渲染出来
  • 组件化 React 中一切都是组件（万物皆可组件）。 我们通常将应用程序的整个逻辑分解为小的单个部分。 我们将每个单独的部分称为组件。 通常，组件是一个javascript函数，它接受输入，处理它并返回在UI中呈现的React元素。

如何创建React项目

方式一（推荐）： 使用官方脚手架create-react-app创建项目

npx create-react-app my-app

创建完成后会在当前目录下出现文件夹my-app，cd my-app后运行npm start或yarn start

方式二： 全局安装create-react-app

npm install -g create-react-app

然后使用create-react-app创建项目

create-react-app my-app

创建完成后cd进入输入npm start运行

JSX语法

JSX是基于JavaScript的扩展语法，在React中可以方便地用来描述UI。JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。 例如：

// jsx
const element = (
    <h1 className="greeting">
        Hello World
    </h1>
);

上面的jsx代码在React内部会被转化成React元素

// React元素
const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        chindren: 'Hello World'
    }
}

类组件

class ArticleList extends React.Component {
    render() {
        const { articles }  this.props
        return articles.map(item => {
            const { title } = item
            return <div>{ title }</div>
        })
    }
}

函数组件

function ArticleList() {
  const { articles }  this.props
    return articles.map(item => {
      const { title } = item
      return <div>{ title }</div>
  })
}
// 或
const ArticleList = (props) => {
  // ...
}

类组件和函数组件的区别

  1. 函数组件中，没有this，没有State，也无法使用组件的生命周期方法，而这些在类组件中都有

    btw：在函数组件中使用useState改变state，用useEffect弥补函数组件没有生命周期的缺点，而在类组件中使用this.setState改变state状态，并且可以使用componentDidMount等生命周期函数，

  2. 由于类组件需要实例化而函数组件不用，函数组件的性能比类组件性能要高

React Hooks

常用的React hooks有useState、useEffect、useContext、useReducer...

useState

const [ state, setState ] = useState(0)

useState接收一个初始值，返回的是一个数组，第一项是当前的state，第二项是更新state的函数。例如，useState(0)中的0是state的初始值。

useState不仅可以接收一个初始值，也可以接收一个函数action，action返回值作为新的state，例如：

const [ time, setTime ] = useState(new Date())

setState 函数用于更新 state，它接收一个新的 state 值并将组件的一次重新渲染加入队列。

useEffect

useEffect通常用来作为函数组件的生命周期函数，它接收两个参数，第一个参数是当依赖

dep更新时执行的函数，第二个参数是需要监听的依赖dep

如果不传入第二个参数则所有更新都执行。如果传入空数组那么仅在页面挂载和卸载时执行

useEffect(() => {
  console.log('useEffect')
})  // 所有更新都执行

useEffect(() => {
  consoe.log('useEffect')
},[]) // 仅在页面渲染和更新时执行

useEffect(() => {
  console.log('useEffect')
},[like])        // 仅在like更新时执行

注意：如果在useEffect内返回一个函数，那么React就在执行useEffect时操作它

自定义防抖hook

export default function() {
  const [counter, setCounter] = useState(0);

  const handleClick = useDebounce(function() {
    setCounter(counter + 1)
  }, 1000)

  return (
  <div style={{ padding: 30 }}>
    <Button
      onClick={handleClick}
    >click</Button>
    <div>{counter}</div>
  </div>
 )
}

注意：自定义hook的函数名需要以use开头

Function as Children Component

顾名思义：在父组件中使用函数作为子组件。在React官网中是这样定义的：插入在JSX中的JS表达式会被转化为字符串、react元素或一个数组。props.children像其他参数一样可以传递任何类型的数据，也就是说，你可以在将回调函数作为组件的参数

Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, props.children works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as props.children

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

在上面这个例子中，函数式组件Repeat用一个for循环调用传入的函数，将返回的结果推入数组中，并最终在页面中渲染列表中的每个div元素

FACC有什么用

它可以将函数作为组件的子元素，做到将渲染逻辑保存在自有组件中，而不是被委派，这样做的好处是随着项目庞大起来，组件被复用的次数会越来越多，有效提升代码复用率。

avatar
文章
阅读
粉丝