精华内容
下载资源
问答
  • ReactReact.FCReact.Component的初步认识

    万次阅读 多人点赞 2020-04-13 16:11:06
    一、React.FC<>{}react.fc是什么 React.FC<>的在typescript使用的一个泛型,在这个泛型里面可以使用useState,个人觉得useState挺好用的,例子如下: const SampleModel: React.FC<{}> = () =>...

    React 的组件可以定义为 函数(React.FC<>)或class(继承 React.Component) 的形式。

    一、React.FC<>

    1.React.FC是函数式组件,是在TypeScript使用的一个泛型,FC就是FunctionComponent的缩写,事实上React.FC可以写成React.FunctionComponent

    const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
      <div>{message}</div>
    );
    

    2.React.FC 包含了 PropsWithChildren 的泛型,不用显式的声明 props.children 的类型。React.FC<> 对于返回类型是显式的,而普通函数版本是隐式的(否则需要附加注释)。

    3.React.FC提供了类型检查和自动完成的静态属性:displayNamepropTypesdefaultProps(注意:defaultProps与React.FC结合使用会存在一些问题)。

    4.我们使用React.FC来写 React 组件的时候,是不能用setState的,取而代之的是useState()useEffect等 Hook API。

    例子(这里使用阿里的Ant Desgin Pro框架来演示):

    const SampleModel: React.FC<{}> = () =>{   //React.FC<>为typescript使用的泛型
      	const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
      	return{
      	{/** 触发模态框**/}
      	<Button style={{fontSize:'25px'}}  onClick={()=>handleModalVisible(true)} >样例</Button>
      	{/** 模态框组件**/}
      	<Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> 
      }
    

    二、class xx extends React.Component

    如需定义 class 组件,需要继承 React.ComponentReact.Component是类组件,在TypeScript中,React.Component是通用类型(aka React.Component<PropType, StateType>),因此要为其提供(可选)prop和state类型参数:

    例子(这里使用阿里的Ant Desgin Pro框架来演示)::

    class SampleModel extends React.Component {
      state = {
        createModalVisible:false,
      };
    
      handleModalVisible =(cVisible:boolean)=>{
        this.setState({createModalVisible:cVisible});
      };
      return {
      {/** 触发模态框**/}
      	<Button onClick={()=>this.handleModalVisible(true)} >样例</Button>
      	{/** 模态框组件**/}
      	<Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} /> 
      }
    

    ps:简单来说,不知道用什么组件类型时,就用 React.FC

    展开全文
  • 一、React.FC import React, { useState } from 'react'; export interface UserProps { updateModalVisible: boolean; } const User: React.FC<UserProps> = () => { let [count, setCount] = useStat...

    一、React.FC

    用React.FC可以在组件中改变state的值,详情可见React Hook

    import React, { useState } from 'react';
    
    export interface UserProps {
      updateModalVisible: boolean;
    }
    
    const User: React.FC<UserProps> = () => {
      let [count, setCount] = useState(4);
    
      const changeVal = () => {
        count++;
        setCount(count);
      };
      return <div style={{ padding: 20 }}>
        <h1>User页面</h1>
        <h2>{count}</h2>
        <button onClick={changeVal}>改变我的值</button>
      </div>;
    };
    export default User;
    
    

    二、React.ReactElement

    ReactElement is an object with a type and props.
    ReactElement 是一个有type和props的对象.
    被createElement函数调用,根据环境设置对应的属性

    export interface AvatarListProps {
      Item?: React.ReactElement<AvatarItemProps>;
      size?: SizeType;
      maxLength?: number;
      excessItemsStyle?: React.CSSProperties;
      style?: React.CSSProperties;
      children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
    }
    

    三、JSX.Element

    JSX.Element = ReactElement
    JSX.Element-> React.createElement的返回值

    class Class implements  JSX.Element {
      // @ts-ignore
      key: React.Key | null | undefined;
      props: any;
      type: any;
    }
    

    四、React.ReactNode

    ReactNode 可以是 ReactElement, ReactFragment, string ,a number 或者一个数组 ReactNodes, 或者null,或者 undefined, 或者 a boolean:
    React.ReactNode->组件的返回值
    render(): ReactNode;

    参考链接

    展开全文
  • React.Component 最常见的,最常用的 包含 render() React.Component 并未实现 shouldComponentUpdate() ...React.FC import React, { PureComponent,Component } from 'react'; class CompareCompon...

    1. React.Component

    最常见的,包含最常用的render(),componentDidMount(),shouldComponentUpdate…

    • shouldComponentUpdate(nextProps, nextState)
      判断 React 组件的输出是否受当前 state 或 props 更改的影响。意思就是只要组件的 props 或者 state 发生了变化,就会重新构建 virtual DOM,然后使用 diff算法进行比较,再接着根据比较结果决定是否重新渲染整个组件。shouldComponentUpdate函数是重渲染时render()函数调用前被调用的函数,它接受两个参数:nextProps和nextState,分别表示下一个props和下一个state的值。并且,当函数返回false时候,阻止接下来的render()函数的调用,阻止组件重渲染,而返回true时,组件照常重渲染。
    • React.Component 并未实现 shouldComponentUpdate(),如何利用shouldComponentUpdate钩子函数优化react性能
    • demo1.tsx
    import React, { PureComponent,Component } from 'react';
    class CompareComponent extends Component<any, any>{
     state = {
       isShow: false,
       count:1
     }
     shouldComponentUpdate(nextProps, nextState){
       if(nextState.isShow===this.state.isShow){
         return false // false则不会调用render
       }
       return true
     }
     changeState = () => {
       this.setState({
         isShow: true
       })
     };
    
     handleAdd=()=>{
       const {count} = this.state
       this.setState({
         count:count+1
       })
     }
    
     render() {
       console.log('render');
       return (
         <div>
           <button onClick={this.changeState}>点击赋值</button>
           <div>{this.state.isShow.toString()}</div>
    
           <button onClick={this.handleAdd}>点击{this.state.count}</button>
         </div>
       );
     }
    }
    export default CompareComponent
    

    参考链接

    2.React.PureComponent

    React.PureComponent 与 React.Component 几乎完全相同,也包括render,生命周期等等。但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。如果对象包含复杂的数据结构,它可能会因深层的数据不一致而产生错误的否定判断(表现为对象深层的数据已改变视图却没有更新

    • React.PureComponent在某些条件下,render不用重新渲染
    • PureComponent中不能有shouldComponentUpdate
    • demo2.tsx
    import React, { PureComponent,Component } from 'react';
    
    class CompareComponent extends PureComponent{
      state = {
        isShow: false,
        count:1
      }
      changeState = () => {
        this.setState({
          isShow: true
        })
      };
      handleAdd=()=>{
        const {count} = this.state
        this.setState({
          count:count+1
        })
      }
      render() {
        console.log('render');
        return (
          <div>
            <button onClick={this.changeState}>点击赋值</button>
            <div>{this.state.isShow.toString()}</div>
    
            <button onClick={this.handleAdd}>点击{this.state.count}</button>
          </div>
        );
      }
    }
    export default CompareComponent
    

    3.React.Component、React.PureComponent的区别

    通过查看render的渲染次数会发现规律
    shouldComponentUpdate返回true的话,React.Component无论state发生新的改变,都会重新渲染render。若是返回false,则state在满足条件下返回false的话,不会重新渲染render

    • PureComponent = shouldComponentUpdate(false) + React.Component

    4.React.FC

    React.FC<>的在typescript使用的一个泛型,这个泛型里面可以使用useState
    这个里面无生命周期。
    通过useState可以实现在函数组件中实现值的更新
    useState在前两者中不能使用,只能在函数组件或者泛型里面使用。具体如何使用,可参考我这篇文章

    import React, { useState } from 'react';
    
    export interface NoticeProps {
      name: string;
      address: string
    }
    
    const Notice: React.FC<NoticeProps> = (props) => {
      const [ name, setName ] = useState('angle');
      const [ count, setCount ] = useState(1);
      const addCount=()=>{
        setCount(count+1)
      }
    
      console.log(count)
      return <div>
        <p>我是message页面,name是:{name}</p>
        <p>我是message页面,count是:{count}</p>
        <button onClick={() => setName('jane')}>点击我改变name</button>
        <br />
        <button onClick={addCount}>点击我改变count</button>
      </div>;
    }
    export default Notice;
    
    
    展开全文
  • React的组件可定义为函数(React.FC<>)或class(继承React.Componnent)的形式 ###React.FC<> 1.React.FC是函数式组件 是在TypeScript使用的一个泛型,FC就是FunctionComponent的缩写 事实上React.FC可以...

    React的组件可定义为函数(React.FC<>)或class(继承React.Componnent)的形式
    ###React.FC<>
    1.React.FC是函数式组件 是在TypeScript使用的一个泛型,FC就是FunctionComponent的缩写 事实上React.FC可以写成React.FunctionComponent

    const App:React.FunctionComponent<{message:string}>=({message})=>(
    	<div>{message}</div>
    )
    

    2.React.FC包含了PropsWithChildren的泛型,不用显示的声明props.children的类型。React.FC<>对于返回类型是显式的 而普通函数版本是隐式的(否则需要添加注释)

    1. React.FC提供了类型检查和自动完成的静态属性:displayName,propTypes和defaultProps(注意defaultProps与React.FC结合使用会存在一些问题)

    2. 我们使用React.FC来写React组件的时候 是不能用setState的 取而代之的是useState()、useEffect等Hook API

    例子(这里使用阿里的Ant Design Pro框架来演示):

    const SampleModel: React.FC<{}> = ()=>{ //React.FC<> 为typeScript使用的泛型
       const  [createModalVisiable,handleModelVisiable] = useState<boolean>(false)
       return {
       		//触发模态框
       		<Button style={{fontSize:'25px'}} onClick={()=>handleModalVisiable(true)}>样例<Button/>
       		//模态块组件
       		<Model onCancel={()=>handleModelVisiible(false)} ModelVisiable={createVisiable}/>
       }
    }
    

    class xx extends React.Component

    如需定义class组件 需继承React.Component。React.Component是类组件 在typescript中 React.Component是通用类型(aka React.Component<PropType,stateType>),因此要為其提供(可选)prop和state类型参数:
    例子(Ant Design Pro框架来演示):

    class SampleModel extends React.Component{
    	state = {
    	   createModelVisiable:false
    }
        handleModelVisiable = (cVisiable:boolean)=>{
        this.setState({createModelVisiable:cVisiable})
    }
    return {
    //触发模态框
    <Button onClick={()=>this.handleModelVisiable(true)}>样例</Button>
    //模态框组件
    <Model onCancel={()=>handleVisiable(false)} ModelVisiable={this.state.createModelVisiable}/>
    }
    }
    
    展开全文
  • 网络建设 之 React.FC

    2021-09-26 19:26:35
    1.React.FC是函数式组件,是在TypeScript使用的一个泛型,FC就是FunctionComponent的缩写,事实上React.FC可以写成React.FunctionComponent 简单来说,不知道用什么组件类型时,就用React.FC
  • 1. React.Component 最常见的,包含最常用的render(),componentDidMount(),shouldComponentUpdate… shouldComponentUpdate(nextProps, nextState) 判断 React 组件的输出是否受当前 state 或 props 更改的影响。...
  • React.FC函数组件内怎么监听路由变化

    千次阅读 2020-12-11 18:09:54
    import React, { useEffect } from 'react';...const MyComponent: React.FC = () => { // 拿到history const history = useHistory(); // useEffect(effectFunc, []) 类似于 componentDidMount useE...
  • 不多说,直接上代码 const [dataBaseName,setDataBaseName]=useState([]); function onInputChange (e): void { console.log(e.target.value) setDataBaseName(e.target.value); form.setFieldsValue({ dbName: ...
  • 一个渐进式的框架,用于构建高效且可扩展的服务器端应用程序,受到极大启发。 描述 框架TypeScript入门资料库。 安装 $ npm install 运行应用 # development $ npm run start # watch mode $ npm run start:dev ...
  • React.useMemo、React.useCallback 配合实现性能优化   我想,用 React 写项目的程序员都明白实现 React 性能优化的一大方式就是减少不必要的组件更新,在 Class 组件里面减少不必要的组件更新方式之一就是利用 ...
  • (JSX attribute) React.ClassAttributes.ref?: React.LegacyRef Type ‘MutableRefObject’ is not assignable to type ‘LegacyRef’. Type ‘MutableRefObject’ is not assignable to type ‘RefObject’. Types ...
  • React.emo import React, { useState } from 'react' ...const MemoParent:React.FC = () => { const [count, setCount] = useState(0) console.log('parent re render') return ( <> <button onC
  • React.Children.map()有些类似Array.prototype.map()。如果children是数组则此方法返回一个数组,如果是null或undefined则返回null或undefined。 <Tabs activeIndex={0} onTabChange={this.changeView}> <...
  • React.js(函数式组件)

    千次阅读 2020-09-09 09:44:39
      一般,在一个文件中,我们应该只...React.FC<> 来创建函数式组件,它是 typescript 中的一个泛型,这个泛型提供了: userState   实现 this.state 以及 this.setState() useEffect   实现 componentWillU
  • vue.js 与 react.js 对比

    2019-11-04 17:51:54
    如果选择Vue与React No. 评判理由 Vue.js React.js 1 喜欢模板搭建 v x 2 简单和“能用就行" v x 3 希望小和快 v x 4 大型应用程序 x v 5 适用于Web端和原生APP x v 6 最大的生态系统 x v Vue的...
  • React.memo的用法

    千次阅读 2019-04-15 02:07:23
    在使用function 作为statless组件的时候,我们通常是这样的: const Foo = (props) => { console.info(props.name); return <div>...export default class Bar extends React.PureComp...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,945
精华内容 1,578
关键字:

react.fc