react 使用注意：

一麻袋小猫

已于 2022-12-05 15:29:21 修改

阅读量350

点赞数

分类专栏： React 文章标签： react.js

于 2021-09-22 10:00:32 首次发布

本文链接：https://blog.csdn.net/Zmongo/article/details/120409741

版权

React 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

antd 国际标准化

有时需要将组件默认为英文的部分，设置为中午呢，此时需要用到antd的国际标准化。
在这里插入图片描述

 //国际化标准
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 moment.locale('zh-cn');

antd table 列宽大屏出现缝隙(坑)

第一种情况，没有列做fixed固定，很简单给想要自适应宽的列不设置width就可
第二种情况，有列做fixed固定，这时候很容易在大屏下出现缝隙，那么此时的解决办法就是先计算出所有列占宽+给想要自适应的列宽，此时注意想要自适应的列宽不需要设置宽度，然后尝试缩小屏幕百分比，会发现已经没有缝隙！

let wid = FinancialAttributesColumns(this).reduce((cur, next) => {
            return cur + (next.width ? next.width : 0)
        }, 0)

<Table scroll={{ x: wid + 90, y: document.body.clientHeight - 260}}>
</Table>

react this.seState 设置，获取动态key值

//设置
that.setState({
      [name]: nextColumns
    })
    //获取
this.state[name]

全局pubsub-js

产品要求一个页面实时更新数据，页面实时更新，更一个页面也能得到这个数据，并在页面上渲染出来。
因为是在两个不同的页面中做的，所以会有组件卸载这一情况，其实在app.js用props加state是可以的，但是并不想。
于是在Route.js 引入punsub-js，传入Route中，因为React是单页面应用啊。。。。
通过路由，把pubsub传进子组件里，这样每个页面都可以公用这个pubsub了。

<routeItem.component addMenu={this.props.addMenu} currentFuncRole={this.props.getCurrentMenu} PubSub={PubSub} />

定义Pubsub

PubSub.PubSub.publish('data', i)

使用Pubsub

const {PubSub} = this.props;
        PubSub.PubSub.subscribe('data',(msg,data)=>{
            this.setState({test: data})
          })

看到setState，就知道肯定不能放在render里，那么放在哪里呢，肯定是要放在componentDidMount啦，视图就可以跨页面实时更新啦，非常奈斯

箭头函数

tools_list.map(t=>{{t}})
与
tools_list.map(t=>{
return {t}}
)

函数式组件使用refs hook时需要注意

ref={$RightViewEdit}

<RightViewEidt 
                isAdd = {isAdd}
                menuEditData = {menuEditData}
                ref={$RightViewEdit}
            />

而类式组件使用ref时

<RightViewEidt 
                isAdd = {isAdd}
                menuEditData = {menuEditData}
                ref={ref=>this.$RightViewEdit=ref}
            />

通过ref获取函数式子组件内容：（父组件为函数组件）

实际上无论父组件是函数组件还是类似组件，只要子组件是函数组件就应该这样使用ref获取子组件内容,但是要注意的时父组件如果时类式组件时，创建ref 要用this.$inputChoiceRef = React.createRef(); 不然会直接undefined

const ExpanfTypeRef= useRef();
<ExpanfTypeForm getFieldDecorator={getFieldDecorator} tools={tools} menuEditData={menuEditData} ref={ExpanfTypeRef}/>
子组件：
function ExpanfTypeForm(props, ref) {
    useImperativeHandle(ref, () => ({
        method_params: method_params
    }))
}
export default forwardRef(ExpanfTypeForm)
就可以在父组件中通过ref拿到了

react 不同页面跳转想要传参

原始页面

export default withRouter(WorkflowManageView)

跳转并传参
handleShowMenuModal = (record, tag)=>{
        const {history} = this.props;
        history.push({ pathname : '/workflow' , query:{record, tag}})
    }

目标页面

export default withRouter(FlowPage)

拿到
console.log(props.location.query.record)

react标签

1.React.Fragment

一种包裹容器，类似<></>，<React.Fragment></React.Fragment>不同的一点是，可以带属性，样式，<></>什么都不能带。

2. Context

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

const {Provider, Consumer} = React.createContext(defaultValue);
<Provider value={/*共享的数据*/}>
    /*里面可以渲染对应的内容*/
</Provider>
<Consumer>
  {value => /*根据上下文  进行渲染相应内容*/}
</Consumer>

ConfigProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。设置全局属性，避免props不停的穿透

import { ConfigProvider } from 'antd';
return (
  <ConfigProvider {...yourConfig}>
    <App />
  </ConfigProvider>
);

React.StrictMode 严格模式

官网介绍：

StrictMode 是一个用以标记出应用中潜在问题的工具。就像 Fragment ，StrictMode 不会渲染任何真实的UI。它为其后代元素触发额外的检查和警告。

严格模式检查只在开发模式下运行，不会与生产模式冲突。
使用StrictMode的优点：

识别不安全的生命周期组件
有关旧式字符串ref用法的警告
关于使用废弃的 findDOMNode 方法的警告
检测意外的副作用
检测过时的 context API

React 插槽

我们知道vue有插槽，那么React的插槽怎么使用呢？
在react中没有插槽的概念，但是我们可以通过组合的形式实现‘插槽’；
react官方建议我们使用一个特殊的props （children）来将这些无法提前预知内容的子组件传递到渲染到结果中，jsx中的所有内容都会通过children prop传递到父组件中，使用react组合的方式可以实现类似于Vue插槽的功能；

React.createElement

使用场景：当想要动态渲染组件或者html标签时，尤其是与后端对接的情况下，可使用React.createElement。
使用方法：

React.createElement(
        Icon[item.icon],
        {
          style:{ fontSize: '16px'}
        }
      );
      
	var child1 = React.createElement('li', null, 'one');
    var child2 = React.createElement('li', null, 'two');
    var content = React.createElement('ul', { className: 'ul-class' }, child1, child2); // 第三个参数可以分开也可以写成一个数组 => [child1, child2]
      ReactDOM.render(
          content,
        document.getElementById('root')
      );

React.createElement(
        Icon[item.icon],
        {
          style:{ fontSize: '16px'}
        }
      );

这也是antd 4中创建动态Icon的方法

React useEffect Hook 使用async 报错

useEffect中的第一个回调参数返回的是一个clean-up函数，所以不能返回promise对象，更不能直接使用async/await，否则会报错；
要在里面定义一个函数，在里面使用async-await

React.memo() 和 PureComponent

它帮助我们控制何时重新渲染组件组件仅在它的 props 发生改变的时候进行重新渲染。通常来说，在组件树中 React 组件，只要有变化就会走一遍渲染流程。但是通过 PureComponent 和 React.memo()，我们可以仅仅让某些组件进行渲染。

react 自定义hooks

就是把公共可复用的代码逻辑或业务逻辑抽出来，最后返回一个结果。