Vue刚转React的那些事儿

背景: 3月份离职了，之后入职新公司，第一个任务是react + ts + node项目；由于没有react开发经验就先过了一遍文档，在开始敲代码的时候总是会忘记语法，然后就做了个react 基础语法和注意事项 相关的文档，加一些和vue使用的区别，有react经验的小伙伴就不需要浪费时间往下看啦~~

那么就开始吧~

1. 变量作为属性值及模版中嵌入表达式

 {user.name} 
 
 {{user.name}} 

2. 单向数据流
   react 通过setState来修改，方便定位问题;
   所有 React 组件都必须像纯函数一样保护它们的 props 不被更改
   vue也是单向数据流不过也还是可以通过黑科技改变props的

3. 模版嵌套
   组件的嵌套设计，复杂大型功能自下而上，小型功能自上而下，方便处理和测试

4. react 的 state
   组件私有属性，用与子组件共享，用于可变状态（mutable state）；
   react如果子组件共用且均需要修改state时要将state提升到公共父级去，修改需使用setState来处理

5. 最小state
   通过父级props传进来；随着时间的推移保持不变；能根据其他props和state技术出来；
   以上3种情况都不应该另用新state

6. 组件不使用state时可写成函数形式

   function LogoutButton(props) {
     return (
       
         Logout
       
     );
   }
   
   
   

7. 反向数据流
   子组件通知父组件修改state，通过调用回调函数来解决，将父组件函数传入子组件来进行处理;不同于vue是子组件emit事件，父级接收到emit来执行相关函数

8. 阻止默认事件
   不能通过返回false 的方式阻止默认行为。你必须显式的使用 preventDefault

       
       
         Click me
       
   

   
   function ActionLink() {
     function handleClick(e) {
       e.preventDefault();
       console.log('The link was clicked.');
     }
   
     return (
       
         Click me
       
     );
   }
   

9. 组件名开头必须大写
   React 会将以小写字母开头的组件视为原生 DOM 标签。

   代表 HTML 的 div 标签，而 则代表一个组件，并且需在作用域内使用 Welcome。规范详见深入JSX

10. style

11. 在模板上直接使用要用‘双括号’

12. 定义style对象添加

 
  
喂喂，testtest
  
  const devClass = {color:red};
  

  
  
   

11. class
    在react中class是保留字因此以className替换，其他差异详见react属性差异

    function Square(props) {
      return (
        
          {props.value}
        
      );
    }
    

12. 对比于 vue slot

    1. react 子组件通过props.children可以实现；比起slot props可以传递任何东西

        function FancyBorder(props) {
          return (
            
    
            
              {props.children}
            
          );
        }
        
        function WelcomeDialog() {
          return (
          
            
              
    
                Welcome
              
            
          );
        }
        
        ReactDOM.render(
          ,
          document.getElementById('root')
        );
    

    2. 父组件直接将组件传入及子组件props[any]获取

13. fragment
    render return时需要包裹dom元素;
    React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点

    render() {
      return (
        
          
          
          
        
      );
    }
    

    你可以使用一种新的，且更简短的语法来声明 Fragments;可以像使用任何其他元素一样使用 <> ，除了它不支持 key 或属性

    class Columns extends React.Component {
      render() {
        return (
          <>
            Hello
            World
          
        );
      }
    }
    

14. 参数传递，详见Context

    1. context:设计目的是为了共享那些对于一个组件树而言是“全局”的数据;主要应用场景在于很多不同层级的组件需要访问同样一些的数据;

       // Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
       // 为当前的 theme 创建一个 context（“light”为默认值）。
       const ThemeContext = React.createContext('light');
       
       class App extends React.Component {
         render() {
           // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
           // 无论多深，任何组件都能读取这个值。
           // 在这个例子中，我们将 “dark” 作为当前的值传递下去。
           return (
             
               
             
           );
         }
       }
       
       // 中间的组件再也不必指明往下传递 theme 了。
       function Toolbar(props) {
         return (
           
    
             
           
         );
       }
       
       class ThemedButton extends React.Component {
         // 指定 contextType 读取当前的 theme context。
         // React 会往上找到最近的 theme Provider，然后使用它的值。
         // 在这个例子中，当前的 theme 值为 “dark”。
         static contextType = ThemeContext;
         render() {
           return ;
         }
       }
    

    2. 组件组合（将组件传入）

    
      
      // ... 渲染出 ...
      
      // ... 渲染出 ...
      
      // ... 渲染出 ...
      
        
      
      
    
      function Page(props) {
        const user = props.user;
        const userLink = (
          
            
          
        );
        return ;
      }
      
      // 现在，我们有这样的组件：
      
      // ... 渲染出 ...
      
      // ... 渲染出 ...
      
      // ... 渲染出 ...
      {props.userLink}
    

15. 错误边界

部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了该概念；
错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误

16. 组件首字母必须大写

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 错误!!!！JSX 类型不能是一个表达式。
  return ;
  // 正确!!!！JSX 类型可以是大写字母开头的变量。
  const SpecificStory = components[props.storyType];
  return ;
}

17. 传递子集动态变量(直接传就行) 在此基础上改

  render() {
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
    const tmp = [
      {scale: 'c', key: celsius},
      {scale: 'f', key: fahrenheit},
    ]
    return (
      

        {
          tmp.map(item => {
            return  
           })
        }
      
    );
  }

14. 传递当前event

 
 this.handleFilterTextChange('sth', e)}
 />
  
  

18. Portal 弹窗
    Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
    典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框

19.componentWillReceiveProps
使用时最好比较两个props一面陷入死循环，不停更新组件参考

等等。。。

参考：

1. https://juejin.im/post/5c2de832f265da6172659b45
2. https://juejin.im/post/5b8b56e3f265da434c1f5f76

结语：
有咩有小伙伴能提供个更恰当的文章名字哇。。。嘤嘤。。起名废