React02

React 进阶提升

目录

• React 进阶提升
  • 条件渲染
  • 受控组件*
  • 状态提升*
    • 组件数据流
  • TODO-LIST
  • 设置服务器端口
    • 列表渲染
    • 条目PropTypes检查类型
  • export & import
  • Refs 和 DOM
  • 非受控组件*
  • 路由
  • 组合
    • 包含
    • 特殊实例
  • 三方UI设计语言
  • 打包及发布
  • 今天所有安装的包

条件渲染

1. if条件渲染: 如果用户输入的金额>=10元, 购买成功

function BuySomething(props){
    if(props.money >= 10){
        return <p>恭喜, 购买成功! {props.money} >= 10</p>;
    }
    return <p> 购买失败,金额不足! {props.money}</p>
}

if (list.length % 2 === 0){
    subTitle = <p>好记性不如烂笔头! </p>;
} else {
    subTitle = <p>明日复明日, 明日何其多! </p>;
}

1. && 连接符判断

{this.props.showTitle && (<h2>GTD 记事本</h2>)}

1. 三目运算符判断

{/* 三目运算符/三元运算符 */}
{
    list.length === 0 ?
        <p>这里空空如也, 恭喜咯!</p> :
        <ul>{list}</ul>
}

1. 阻止组件渲染 (很少用到)

// 某种不希望渲染的条件发生了, 通过返回null阻止render渲染
if(true){
    return null;
}
return (...);

受控组件*

在html中, input, select, textarea这些表单元素都会默认维护自己的状态，React通过受控组件将用户输入的内容保存到state中，通过渲染表单组件，控制用户输入之后发生的变化。

//1. 在构造函数初始化状态
constructor(props) {
    super(props);
    this.state = { money:'' };
}

// 2.监听input的变化
<input type="text" value={this.state.money} onChange={this.handleChange} />

// 3.处理变化，更新state
handleChange = (e)=>{
    // console.log(e.target.value);
    this.setState({
        money: e.target.value
    })
}

状态提升*

如果有多个组件需要共享状态数据，把要MoneyInput共享的数据state={money, unit}提升到他们最近的共同父组件App中。

数据源要保证只有一个，并保持自上而下的数据流结构。


组件数据流

1. 用户在MoneyInput组件中输入了数值
2. 在input的onChange函数中，监听到了变化，把money传给父组件
3. 父组件设置并更新到唯一的state中，状态提升完毕
4. 因为this.setState被执行，故而render被重新触发， 根据unit，money转成不同的货币
5. 父组件通过money={rmb}属性设置给MoneyInput组件，this.props.money

TODO-LIST

GTD软件: Getting things done

设置服务器端口

在package.json的scripts下配置

"start": "SET PORT=3456 & react-scripts start",

列表渲染

• .map可以帮我们把数组转换成元素的数列
• .filter 根据每个条目返回的boolean, 决定去留. true保留, false删除
• 列表key注意:
  • key的作用时在DOM中的元素被添加或移除时, 帮助react识别是哪些元素发生了变化
  • 每个元素key需要是当前列表唯一的字符串, 一般使用id, 没有id时才使用index索引
  • key要放在列表条目的根组件 (有嵌套时)

条目PropTypes检查类型

• 导包 import PropTypes from 'prop-types';

• propTypes只在开发模式下进行检查，当给组件传入错误的值（或未传值），JS控制台会打印警告信息。在生产环境不会进行检查（影响页面效率）

• 属性类型及Required检查

  /**
   * 属性类型及isRequired检查
   * order: 数字类型
   * item: 字符串类型
   */
  TodoItem.propTypes = {
      order: PropTypes.number.isRequired,
      item: PropTypes.string,
  }
  

• 设置属性默认值(当父组件没有传入指定值时，使用默认值)

  /**
   * 设置属性默认值
   */
  TodoItem.defaultProps = {
      item: "默认的条目描述"
  }
  

export & import

Refs 和 DOM

ref用来访问DOM节点或React元素 ref是reference的缩写

• 使用方式：
  1. 在组件得属性中添加ref={(input) => {this.inputNode = input}}
  2. 在需要用其值或引用的地方通过this.inputNode即可
• 注意事项:
  • ref在html元素上使用， ref的引用的是DOM节点
  • ref在自定义的class组件上使用，ref的引用的是当前组件的实例
  • ref不可以在函数式声明的组件上使用， 因为其没有实例，但是可以在内部使用ref

非受控组件*

• 如果希望表单数据由DOM处理，可以使用非受控组件方式。
• 常见的表单受控组件及 设置/获取 值方式如下：

元素	属性值	变化回调	在回调中获取值
<input type="text" />	value="string"	onChange	event.target.value
<input type="checkbox" />	checked={boolean}	onChange	event.target.checked
<input type="radio" />	checked={boolean}	onChange	event.target.checked
<textarea />	value="string"	onChange	event.target.value
<select />	value="option value"	onChange	event.target.value

• 在受控组件和非受控组件之间抉择：参考文档

  如果表单的UI交互非常简单：通过refs实现非受控组件即可。

  如果表单的UI交互比较复杂：官方推荐使用受控组件实现表单，把DOM节点/React元素的值或数据交给React组件处理(保存到state)。

路由

参考链接1

中文参考文档

安装：

yarn add react-router-dom

导入Module：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

声明路由器及路由：

<Router>
    <div>
        <Route exact={true} path="/" render={() => (<TodoComponent showTitle={true} />)}/>
        <Route path="/about" component={About}/>
    </div>
</Router>

通过Link跳转

<Link to="/about">关于about</Link>
<Link to="/">主页Home</Link>

• 通过path声明路由路径；
• exact={true}表示严格匹配path
• 通过component指定要渲染的组件；
• 通过render属性配合箭头函数，可以给组件传入属性参数。
• 通过Link的to属性指定要跳转的路径

组合

React提供了强大的组合模型，官方建议使用组合（而非继承）来复用组件代码。

包含

• 当一些组件不能提前知道他们的全部子组件是什么， 比如Dialog，Menu, Sidebar
• 通过组件内render声明{props.children}，使用时在标签内部填入自定义的元素内容即可。
• 通过自定义字段可以使组件拥有多个自定义元素入口。比如subTitle

1. 声明：

   function AboutPanel(props) {
       return (
           <div className="about-panel">
               <h2 className="about-title">{props.title}</h2>
               {props.subTitle}
   
               <p>{props.desc}</p>
               {props.children}
           </div>
       );
   }
   

2. 使用：

   <AboutPanel
       title="兴趣爱好"
       desc="性别男, 爱好女。最大的缺点是太实诚，总爱习惯性给公司免费加班" >
       <input type="text" ref={(input) => this.textInput = input}/>
       <button onClick={() => alert(this.textInput.value)}>点评</button>
   </AboutPanel>
   

特殊实例

// 这里AboutPanelSpcial 是 AboutPanel 的特殊实例
class AboutPanelSpcial extends React.Component{
    render(){
        return (
            <AboutPanel
                title="工作履历"
                subTitle={<h5>人生精力丰富, 行业跨度大</h5>}
                desc="走过男闯过北, 火车道上压过腿; 养过狼放过虎, 少林寺里练过武"
            />
        )
    }
}

三方UI设计语言

• 蚂蚁金服：https://ant.design/index-cn
• Material-UI：https://material-ui.com/

打包及发布

npm run build

运行服务器代码: build包含index.html文件的文件夹

前台运行: serve -s build

后台运行(指定端口80): nohup serve -s build -l 80 &

今天所有安装的包

1. react-router-dom 路由

   应用场景：页面切换

   安装方式：yarn add react-router-dom

2. serve 开启服务

   应用场景：部署打包好的应用

   安装方式：yarn global add serve