React曾经忽略的知识点（下）

1.JSX渲染

想让类似 false、true、null 或 undefined 出现在输出中，你必须先把它转换成字符串 :

<div>

  My JavaScript variable is {String(myVariable)}.

</div>

2.获取上传文件的信息

class FileInput extends React.Component {

  constructor(props) {

    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleSubmit(event) {

    event.preventDefault();

    alert(

      `Selected file - ${this.fileInput.files[0].name}`

    );

  }

  render() {

    return (

      <form onSubmit={this.handleSubmit}>

        <label>

          Upload file:

          <input

            type="file"

            ref={input => {

              this.fileInput = input;

            }}

          />

        </label>

        <br />

        <button type="submit">Submit</button>

      </form>

    );

  }

}

ReactDOM.render(

  <FileInput />,

  document.getElementById('root')

);

3.防止突变，添加数组的方法

　　1.用concat重写成

handleClick() {

  this.setState(prevState => ({

    words: prevState.words.concat(['marklar'])

  }));

}

　　2.用ES6支持数组的spread语法

handleClick() {

  this.setState(prevState => ({

    words: [...prevState.words, 'marklar'],

  }));

};

function updateColorMap(colormap) {

  return {...colormap, right: 'blue'};

}

　　3.不污染原始对象，使用Object.assign方法

function updateColorMap(colormap) {

  return Object.assign({}, colormap, {right: 'blue'});

}

updateColorMap现在会返回一个新对象，而不会改变之前的旧对象。Object.assign在ES6中，需要polyfill支持。

如果使用Create React App，默认情况下 Object.assign和spread对象都可以使用。

4.Context

Context 设计目的是为共享那些被认为对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

　　1.React.createContext

const {Provider, Consumer} = React.createContext(defaultValue);

创建一对 { Provider, Consumer }。当 React 渲染 context 组件 Consumer 时，它将从组件树的上层中最接近的匹配的 Provider 读取当前的 context 值。

如果上层的组件树没有一个匹配的 Provider，而此时你需要渲染一个 Consumer 组件，那么你可以用到 defaultValue 。这有助于在不封装它们的情况下对组件进行测试。

　　2.Provider

<Provider value={/* some value */}>

React 组件允许 Consumers 订阅 context 的改变。

接收一个 value 属性传递给 Provider 的后代 Consumers。一个 Provider 可以联系到多个 Consumers。Providers 可以被嵌套以覆盖组件树内更深层次的值。

　　3.Consumer

<Consumer>

  {value => /* render something based on the context value */}

</Consumer>

一个可以订阅 context 变化的 React 组件。

接收一个函数作为子节点. 函数接收当前 context 的值并返回一个 React 节点。传递给函数的 value 将等于组件树中上层 context 的最近的 Provider 的 value 属性。如果 context 没有 Provider ，那么 value 参数将等于被传递给 createContext() 的 defaultValue 。

　　注意

每当Provider的值发送改变时, 作为Provider后代的所有Consumers都会重新渲染。从Provider到其后代的Consumers传播不受shouldComponentUpdate方法的约束，因此即使祖先组件退出更新时，后代Consumer也会被更新。

　　举个例子：

index.js

import React, { Component } from 'react';

import {ThemeContext,themes,UserContext} from './theme-context';

import ThemeTogglerButton from './theme-toggler-button'

function Toolbar(props){

  return(

    <ThemeContext.Consumer>

      {({theme,toggleTheme})=>(

        <UserContext.Consumer>

          {user=>(

            <ThemeTogglerButton user={user} theme={theme} toggleTheme={toggleTheme}/>

          )}

        </UserContext.Consumer>

      )}

    </ThemeContext.Consumer>

  );

}

class LotsContext extends Component {

  constructor(props){

    super(props);

    this.toggleTheme = ()=>{

      this.setState(state=>({

        theme:

          state.theme === themes.purple

            ?themes.pink

            :themes.purple,

      }));

    };

    this.state={

        theme:themes.pink,

        toggleTheme:this.toggleTheme,

        user:'mosquito~'

    };

  }

  render() {

    const {user,theme,toggleTheme} = this.state;

    return (

        <ThemeContext.Provider value={{theme,toggleTheme}}>

          <UserContext.Provider value={user}>

            <Toolbar />

          </UserContext.Provider>

        </ThemeContext.Provider>

    );

  }

}

export default LotsContext;

theme-context.js

import React from 'react';

export const themes = {

    pink:{

        background:"pink",

    },

    purple:{

        background:"purple",

    },

};

export const ThemeContext = React.createContext({

    theme:themes.pink,

    toggleTheme:()=>{},

});

export const UserContext = React.createContext({

    user:"mosquito~"

});

theme-toggler-button.js

import React from 'react';

import {ThemeContext} from './theme-context';

function ThemeTogglerButton(props){

    return(

        <ThemeContext.Consumer>

            {({theme,toggleTheme}) => (

                <div

                onClick={toggleTheme}

                style={{width:'100px',height:'100px',backgroundColor: theme.background}}

                >

                    {props.user}

                </div>

            )}

        </ThemeContext.Consumer>

    );

}

export default ThemeTogglerButton;

运行结果：

巴特西

React曾经忽略的知识点（下）

最新文章

热门文章