React 常用知识点快速查找

---

title: React常用知识点快速查找
author: 作者
top: false
toc: false
date: 2019-07-30 13:39:35
tags:

---

按照Vue 的学习思路，找到对应的 react 中的实现方式

https://zh-hans.reactjs.org/

https://reactjs.org.cn/doc/hello-world.html

1. 基础

• v-if 如何实现

  1. 方法一：直接 if 判断

     //定义基础组件
     function Orange(){
       return <h1>我喜欢橘子</h1>
     }
      
     function Apple(){
       return <h1>我喜欢苹果</h1>
     }
     //进行选择
     function GetFavor(props){
       const favor = props.fruit;
       if(favor=='orange'){
         return <Orange/>
       }else{
         return <Apple/>
       }
     }
     //渲染
     ReactDOM.render(
       <GetFavor fruit='orange'/>,
        document.getElementById('root')
        )
     
     
     

2. && 和 || 的用法

   // A&& <h1>  当 A 为真 则 执行 <h1>
   function Cook(props){
     var p = props.process;
    return <div>
     <h1>欢迎你来到厨房</h1>
     {
       p=='有米了'&&
         <h1>{p},开始煮饭</h1>
     }
     {
       p=='没有米了'&&
         <h1>{p},快去买米</h1>
     }
      </div>
   }
   ReactDOM.render(
     <Cook process='有米了'/>,
     document.getElementById('root')
   
   )
   

3. 三目运算

   function ThirdOperator(props){
     var f = props.fruit;
     //三元运算符
     return <h1>
           {f=='orange'? '橘子':'其他'}
         </h1>
   }
   ReactDOM.render(
     <ThirdOperator fruit='orange'/>,
     document.getElementById('root')
   )
   

4. 避免渲染优化

   function Warnings(props){
     if(props.isRight=='true'){
       //通过 null 避免如下渲染
       return null;
     }
     return <div>
           <h1>请输入正确密码</h1>
         </div>
   }
    
   ReactDOM.render(
     <Warnings isRight='false'/>,
     document.getElementById('root')
   )
   

• v-for 如何实现 使用map方法

  function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
      <ListItem key={number.toString()}
                value={number} />
    );
    return (
      <ul>
        {listItems}
      </ul>
    );
  }
  

• computed 如何实现

  1. react 中没有 计算属性

  2. react 基于传进来的数值 修改，直接使用 func 方法

  3. 还有一种 直接 用 getter注意没有缓存

     // 推荐的做法：通过getter而不是函数形式，减少变量
     get renderFullName () {
       return `${this.props.firstName} ${this.props.lastName}`;
     }
     render () {
        <div>{ this.renderFullName  }</div> 
     }
     

4. 插件貌似没有什么人气，建议不用

   https://liximomo.github.io/introduce-recomputed

5. xxx

• watch 如何实现（貌似没有）

  当数据变化 会调用 生命周期方法

  componentWillUpdate(object nextProps, object nextState) 
  componentDidUpdate(object prevProps, object prevState) 
  

• 如何 实现点击事件

  class Title extends Component {
    handleClickOnTitle (word, e) {
      console.log(this, word)
    }
  
    render () {
      return (
        <h1 onClick={this.handleClickOnTitle.bind(this, 'Hello')}>React 小书</h1>
      )
    }
  }
  

• react 中 ref 用法

  class MyComponent extends React.Component {
    handleClick() {
      // 使用原生的 DOM API 获取焦点
      this.refs.myInput.focus();
    }
    render() {
      //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
      return (
        <div>
          <input type="text" ref="myInput" />
          <input
            type="button"
            value="点我输入框获取焦点"
            onClick={this.handleClick.bind(this)}
          />
        </div>
      );
    }
  }
   
  ReactDOM.render(
    <MyComponent />,
    document.getElementById('example')
  );
  

• props 的传递 和 类型校验 react的不同版本有差异

  https://www.runoob.com/react/react-props.html
  // 默认值
  HelloMessage.defaultProps = {
    name: 'Runoob'
  };
  // 传值传输
  
  MyComponent.propTypes = {
      // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
     optionalArray: React.PropTypes.array,
      optionalBool: React.PropTypes.bool,
      optionalFunc: React.PropTypes.func,
      optionalNumber: React.PropTypes.number,
      optionalObject: React.PropTypes.object,
      optionalString: React.PropTypes.string,
   
      // 可以被渲染的对象 numbers, strings, elements 或 array
      optionalNode: React.PropTypes.node,
   
      //  React 元素
      optionalElement: React.PropTypes.element,
   
      // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
      optionalMessage: React.PropTypes.instanceOf(Message),
   
      // 用 enum 来限制 prop 只接受指定的值。
      optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
   
      // 可以是多个对象类型中的一个
      optionalUnion: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
        React.PropTypes.instanceOf(Message)
      ]),
   
      // 指定类型组成的数组
      optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
   
      // 指定类型的属性构成的对象
      optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
   
      // 特定 shape 参数的对象
      optionalObjectWithShape: React.PropTypes.shape({
        color: React.PropTypes.string,
        fontSize: React.PropTypes.number
      }),
   
      // 任意类型加上 `isRequired` 来使 prop 不可空。
      requiredFunc: React.PropTypes.func.isRequired,
   
      // 不可空的任意类型
      requiredAny: React.PropTypes.any.isRequired,
   
      // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
      customProp: function(props, propName, componentName) {
        if (!/matchme/.test(props[propName])) {
          return new Error('Validation failed!');
        }
      }
    }
  }
  

• xxx

2.如何传值

• 简单 父子 传值

  子组件调用父组件的函数，来处理，函数作为 props 传递到子组件中

//子组件
var Child = React.createClass({
    render: function(){
        return (
            <div>
                请输入邮箱：<input onChange={this.props.handleEmail}/>
            </div>
        )
    }
});
//父组件，此处通过event.target.value获取子组件的值
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ''
        }
    },
    handleEmail: function(event){
        this.setState({email: event.target.value});
    },
    render: function(){
        return (
            <div>
                <div>用户邮箱：{this.state.email}</div>
                <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
            </div>
        )
    }
});
React.render(
  <Parent />,
  document.getElementById('test')
);

• 复杂 传值

3. Redux 的使用

https://www.redux.org.cn/

https://juejin.im/post/5b755537e51d45661d27cdc3

• Action

  用于改变store的数据，描述清晰

  { type: 'ADD_TODO', text: 'Go to swimming pool' }
  { type: 'TOGGLE_TODO', index: 1 }
  { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
  
  
  
  /*
   * action 类型
   */
  
  export const ADD_TODO = 'ADD_TODO';
  export const TOGGLE_TODO = 'TOGGLE_TODO'
  export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'
  
  /*
   * 其它的常量
   */
  
  export const VisibilityFilters = {
    SHOW_ALL: 'SHOW_ALL',
    SHOW_COMPLETED: 'SHOW_COMPLETED',
    SHOW_ACTIVE: 'SHOW_ACTIVE'
  }
  
  /*
   * action 创建函数
   */
  
  export function addTodo(text) {
    return { type: ADD_TODO, text }
  }
  
  export function toggleTodo(index) {
    return { type: TOGGLE_TODO, index }
  }
  
  export function setVisibilityFilter(filter) {
    return { type: SET_VISIBILITY_FILTER, filter }
  }
  

​ xxx

​

• Reducer

  只是一个纯函数，接受 state 和 action，返回state

  import { combineReducers } from 'redux'
  import {
    ADD_TODO,
    TOGGLE_TODO,
    SET_VISIBILITY_FILTER,
    VisibilityFilters
  } from './actions'
  const { SHOW_ALL } = VisibilityFilters
  
  function visibilityFilter(state = SHOW_ALL, action) {
    switch (action.type) {
      case SET_VISIBILITY_FILTER:
        return action.filter
      default:
        return state
    }
  }
  
  function todos(state = [], action) {
    switch (action.type) {
      case ADD_TODO:
        return [
          ...state,
          {
            text: action.text,
            completed: false
          }
        ]
      case TOGGLE_TODO:
        return state.map((todo, index) => {
          if (index === action.index) {
            return Object.assign({}, todo, {
              completed: !todo.completed
            })
          }
          return todo
        })
      default:
        return state
    }
  }
  
  const todoApp = combineReducers({
    visibilityFilter,
    todos
  })
  
  export default todoApp
  

• store

  1. getState() 方法获取 state；

  2. getState() 方法获取 state；

  3. subscribe(listener) 注册监听器;

  4. subscribe(listener) 返回的函数注销监听器

  5. import { createStore } from 'redux'
     import todoApp from './reducers'
     
     let store = createStore(todoApp)
     
     // ---------------------------
     import {
       addTodo,
       toggleTodo,
       setVisibilityFilter,
       VisibilityFilters
     } from './actions'
     
     // 打印初始状态
     console.log(store.getState())
     
     // 每次 state 更新时，打印日志
     // 注意 subscribe() 返回一个函数用来注销监听器
     const unsubscribe = store.subscribe(() =>
       console.log(store.getState())
     )
     
     // 发起一系列 action
     store.dispatch(addTodo('Learn about actions'))
     store.dispatch(addTodo('Learn about reducers'))
     store.dispatch(addTodo('Learn about store'))
     store.dispatch(toggleTodo(0))
     store.dispatch(toggleTodo(1))
     store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))
     
     // 停止监听 state 更新
     unsubscribe();
     

• xxx

4. router 的使用

http://www.ruanyifeng.com/blog/2016/05/react_router.html

https://github.com/reactjs/react-router