React简单快速学习

React出现的历史

  • 传统DOM API 关注太多的细节
  • 优点: React 始终刷新整体页面

React

  • 一个新概念: 组件
  • 4个必须api
  • 单向数据流
  • 完善的错误提示

Flux 架构: 单向数据流

衍生产品: Redux Mobx


以组件方式考虑 UI构建

class CommentBox extends Component {
  render () {
    return (
      <div>
        <CommentList />
        <CommentFrom />
      </div>
    )
  }
}
  • 理解 React 组件
    • props + state = View
      1. React 组件一般不提供方法, 而是某种状态机
      2. React组件可以理解为一个纯函数
      3. 单项数据绑定

创建一个简单的组件

  1. 创建静态UI
  2. 考虑组件的状态组成
  3. 考虑组件的交互方式

受控组件 vs 非受控组件

  1. 受控: 表单元素状态由使用者维护
  2. 非受控: 表单元素状态DOM 自身维护

何时创建组件: 单一职责原则

  • 每个组件只做一件事
  • 如果组件变得复杂, 那么应该拆分小组件

数据状态管理: DRY原则

  1. 能计算得到的状态就不要单独存储
  2. 组件尽量无状态, 所需数据通过props 获取

JSX: 一种语法糖

  • JS 代码中直接写 HTML 标记
const name = 'yym'
const element = <h1>Hello, {name}</h1>
  • JSX本质: 动态创建组件的语法糖
  • JSX 中使用表达式
    • jsx本身也是表达式
    const element = <h1>Hello, world</h1>
    
    • 在属性中使用表达式
    <MyComponent foo={1 + 2 + 3} />
    
    • 延展属性
    const props = {firstNmae: 'yym', lastName: 'bruce'}
    const greeting = <Greeting {...props} />
    
    • 表达式作为子元素
    const ele = <li>{ props.name }</li>
    
  • JSX约定: 自定义组件以大写字母开头
    1. React认为小写的tag是原生 DOM 节点, 如 div
    2. 大写字母开头为自定义组件
    3. JSX标记可以直接使用属性语法, 如<menu.Item />

React组件的生命周期

  1. Render阶段
    • 纯净且没有副作用.可能会被React暂停, 中止或重新启动
  2. Pre-commit阶段
    • 可以读取DOM
  3. Commit 阶段
    • 可以使用DOM, 运行副作用, 安排更新
生命周期图示

constructor 构造函数

  1. 用于初始化内部状态, 很少使用
  2. 唯一可以直接修改 state 的地方

getDerivedStateFromProps

  1. 当 state 需要从 props 初始化时使用
  2. 尽量不要使用: 维护两者状态一致性会增加复杂度
  3. 每次 render 都会调用
  4. 典型场景: 表单控件获取默认值

componentDidMount

  1. UI 渲染完成后调用
  2. 只执行一次
  3. 典型场景: 获取外部资源

componentWillUnmount

  1. 组件移除时被调用
  2. 典型场景: 资源释放

getSnapshotBeforeUpdate

  1. 在页面 render 之前调用, state 已更新
  2. 典型场景: 获取 render 之前的 DOM 状态

componentDidUpdate

  1. 每次 UI 更新时被调用
  2. 典型场景: 页面需要根据 props 变化重新获取数据

shouldComponentUpdate

  1. 决定 Virtual DOM 是否要重绘
  2. 一般可以由 PureComponent 自动实现
  3. 典型场景: 性能优化

理解 Virtual DOM 和 key 属性的作用

JSX运行基础: Virtual DOM

  • 虚拟DOM的两个假设
    1. 组件的 DOM结构相对稳定
    2. 类型相同的兄弟节点可以被唯一标识: key

组件设计模式: 高阶组件和函数作为子组件

高阶组件和函数子组件都是设计模式
可以实现更多场景的组件复用

  1. 高阶组件(HOC)

    • 高阶组件接受组件作为参数, 返回新的组件


      高阶组件
  2. 函数作为子组件


    函数作为子组件

    ]


理解 Context API使用场景

context
  • 根节点称为 provide
  • 使用 context 称为 consume
const ThemeContext = React.createContext('light')

class App extends React.Component {
  render () {
    return (
      <ThemeContext.Provide value="dark">
        <ThemeButton />
      </ThemeContext.Provide>
    )
  }
}

function ThemeButton(props) {
  return (
    <ThemeContext.Consume>
      { theme => <Button {...props} themen={ theme } />}
    </ThemeContext.Consume>
  )
}

使用脚手架创建React应用

  1. Create React App
  2. Codesandbox
  3. Rekit

为什么需要脚手架
一个项目需要的应用挺多: React Redux React/Router BABEL Webpack ESlint ...

$ create-react-app

打包和部署

为什么需要打包? 使用 webpack 打包

  • 编译 ES6 语法特性, 编译 JSX
  • 整合资源, 例如图片, Less/Sass
  • 优化代码体积

打包注意事项

  1. 设置 nodejs 环境为 production
  2. 禁用开发时专用代码, 比如 logger
  3. 设置应用根路径
$ npm run build
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 2,891评论 0 24
  • react 基本概念解析 react 的组件声明周期 react 高阶组件,context, redux 等高级...
    南航阅读 1,090评论 0 1
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,058评论 0 1
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 6,308评论 0 9
  • React简介 (1)简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaSc...
    鱼鱼吃猫猫阅读 1,670评论 1 6