Daibor Cyber Space

学习笔记、一些思考和记录

与 React 的又一次相遇

Posted at — Mar 4, 2019
//先安装 React
npm install react react-dom --save
//安装 React 项目生成工具
npm install -g create-react-app
npx create-react-app <app_name>

npx是什么? 相关配置介绍

一个组件会接受名为 props 的参数,并通过名为 render的方法返回一个嵌套结构的视图。

render 返回的是你对你想要渲染内容的描述。React 会根据你的描述将对应的内容在屏幕上渲染出来。讲得更具体一点,render 返回的是一个 React 元素,是一种对渲染内容比较简洁的描述。大部分 React 开发者都会使用一种名为 JSX 的语法扩展来更方便地书写这种描述。比方说里面的 <div /> 会被编译为 React.createElement('div')

在 JSX 中你可以任意使用 JavaScript 表达式,只需要用一个大括号把表达式括起来。每一个 React 元素事实上都一个 JavaScript 对象,你可以在你的应用中把它当保存在变量中或者作为参数传递。

在 React 组件的构造方法 constructor 当中,你可以通过 this.state 为该组件设置自身的状态数据。

在使用 JavaScript classes 时,你必须调用 super(); 方法才能在继承父类的子类中正确获取到类型的 this

每当 this.setState 方法被触发时,组件都会开始准备更新,React 通过比较状态的变化来更新组件当中跟随数据改变了的内容。

**当你遇到需要同时获取多个子组件数据,或者两个组件之间需要相互通讯的情况时,把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中的状态数据就能够更方便地交流共享了。**像这种提升组件状态的情形在重构 React 组件时经常会遇到。

因为每个组件的 state 都是它私有的,所以我们不可以直接在格子组件当中进行修改。

惯例的做法是,我们再通过 props 传递一个父组件当中的事件处理函数到子组件当中。

更进一步的,React 专门为像 Square 组件这种只有 render 方法的组件提供了一种更简便的定义组件的方法: 函数定义组件 。只需要简单写一个以 props 为参数的 function 返回 JSX 元素就搞定了。记得把所有的 this.props 替换成参数 props. 我们应用中的大部分简单组件都可以通过函数定义的方式来编写,并且 React 在将来还会对函数定义组件做出更多优化。

注意到我们在写代码的时候,在各个属性直接换了行,这样可以改善我们代码的可读性。并且我们在 JSX 元素的最外层套上了一小括号,以防止 JavaScript 代码在解析时自动在换行处添加分号。

思考:

comments powered by Disqus