对React应用的一些思考

前言

由于笔者对React的了解不深，即便算是学习React的时间，到目前也才刚刚半年，所以错误不足之处还望指正。以下都是基于React 15（可能有些是16），webpack1进行探讨（注：未学习过Vue，Ng，Ember，Cycle，Immutable，Redux-Saga，Mobx，Observable，Rxjs等等，所以可能有些方面已经被提及或者解决了，希望不要介意）。

正文

本文的排版可能不那么正经，想到哪写到哪，见谅见谅。

组件

JSX
- 备受关注（吐槽）的if问题：要讨论这个问题，首先要明白jsx是转换的是什么，只有这样，你才明白为什么不能在jsx里面写if语句，switch语句，为什么只能写表达式等等。好了，回到正题，我们困挠，那么其他的程序猿肯定也是这样滴，那么正确的姿势是什么呢？没错，提isssue&讨论，我们先来看看已有的提出的一些方案（来自JSX的issue，其他的诸如三目，把逻辑提取出来写在外面，多return方式，IIFE，do expression等等这里就不多说了）：
- NO.1
```
https://github.com/facebook/jsx/issues/65#issuecomment-254056396


  This part only gets shown if myCondition is true
```
- NO.2
```
https://github.com/facebook/jsx/issues/65#issuecomment-255465492（官方人员提出的，所以采用的概率稍微要高一点，基于do expression）


  Hi!
  {if (bool)  else }
```
"It's just JavaScript, not a template language" -> no need to replicate JS functionalities with custom syntax. That is the main benefit of JSX IMO, seriously is so easy to do this with js even if it looks "weird" (for me it is not weird, it is just the syntax of the language) 比如jmar777说的： [if (condition)] [/if] We instead need: { condition && } { condition && } { condition && } If the condition itself gets more complex, then the code gets uglier, or alternatively we need to store the result to a temporary variable, which further increases the verbosity. I will note that this particular pain point would be eased by better support for fragments. TBH I've never seen a specific proposal that I'm overly fond of, but inasmuch as branching logic is integral to all but the most trivial of rendered outputs, I think there's a compelling case to be made for first-class support in JSX. Atrribute autocomplete（这也是我们的愿望之一，毕竟可以减少很多无用功，代码也更整洁）

 
 render () {
  const {
    prop1,
    prop2,
    prop3
  } = this.props

  return (
    
  )
} 
 Or 
 render () {
  const {
    prop1,
    prop2,
    prop3
  } = this.props

  return (
    
  )
} 
 Instead Of 
 render () {
  const {
    prop1,
    prop2,
    prop3
  } = this.props

  return (
    
  )
} 
  
  希望支持数字attribute省略花括号 
  还有的人希望对于字符串类型的attribute，能够省略引号。seb最后也解释了为什么没有允许可以对字符串属性进行简写（因为存在两种不同的语义，如果允许去掉，到底以哪个为准呢） 
  
 https://github.com/facebook/jsx/issues/25#issuecomment-137224657

I think the conclusion is that since these forms are currently semantically different in JSX parsers:

 // Foo & Bar
 // Foo & Bar

We should keep it consistent which would mean that this would also be different:

 // Foo & Bar
 // Foo & Bar 
  
  Attribute Destructuring 
  
 https://github.com/facebook/jsx/issues/76



// 当然也可以先解构了再赋过去，不过那样肯定是要麻烦一点。最后seb也说了，如果https://github.com/RReverser/es-borrowed-props这个提案有进展的话就更好了 
  
   Attribute Or Children 
    
    写过组件的同学应该有时候会遇到这样的情况，我们需要调用方传过来一个组件，那么问题来了，这个组件到底是以children的形式还是props的形式传过来呢？有时候我们只需要一个组件，那么都可以（当然还有考虑语义和大家的惯性思维）。如果需要多个组件就不行了，就需要进行抉择，有时候明明觉得都该以children的形式传进来，但是无奈必须做出取舍。所以我们可以看到比如有些同学就提出了： 
    NO.1 attribute2Children模式 
   
  
  
 https://github.com/facebook/jsx/issues/65#issuecomment-254060186

...

class Bar extends Component { shouldComponentUpdate (nextProps, nextState) { if (this.props !== nextProps) { // 问题就出在这里，假设此后我们需要调用p2 if (nextProps.p2 !== this.props.p2) { // 那么这里到底该返回true还是false呢 // 返回true，那如果p2()的值没变怎么办，算不算是一种浪费 // 返回false，那如果p2()的值变了怎么办 } else { // 这里p2相等了，我们能在之后调用之前缓存的p2吗（假设缓存过了，当然缓存的前提一般都是pure的才能缓存哈）？也不能，因为p2可能从一个“纯”的变成“不纯”的了。另外返回false还是true和上面的同理。 } // 所以最后我们会发现，我们根本没法判断，因为我们不知道p2到底“纯”还是“不纯” } } render () { console.log(...this.props); return null; } } let externalData1 = 'extenalData1'; setTimeout(() => externalData1 = 'externalData2', 1000); let util = (...args) => utilFunc(...args, externalData1); class Foo extends Component { state = { arg1: '1', arg2: util('aa') } componentDidMount () { this.setState({ arg1: '2', arg2: util('bb') }); } handleSomething (...args) { console.log(...args); ...somethingElse } render () { const { arg1, arg2 } = this.state; return ( ); } }

{ responsive( list, () => , // 这里如果C本身就是Row，那么就进行props合并，如果不是Row，那么需要在处理的时候包裹在Row里面 () => ) // Item同理，只是换成了Col }

对React应用的一些思考

前言

正文

组件

数据流

CSS Modules

其他

你可能感兴趣的:(前端,react.js,javascript)