在ReactJs中，可以通过以下几种方式来避免代码重复：

1. 使用组件：将重复的代码封装成一个组件，在需要的地方进行复用。例如，假设有多个地方需要显示一个按钮，可以创建一个Button组件，并在需要的地方引用该组件。

// Button.js
import React from 'react';

const Button = ({ text }) => {
  return {text};
};

export default Button;

// 使用Button组件
import React from 'react';
import Button from './Button';

const App = () => {
  return (
    

      
      
    
  );
};

export default App;

2. 使用高阶组件（Higher-Order Component，HOC）：HOC是一个函数，接受一个组件作为参数，并返回一个新的组件。通过HOC，可以将一些通用的逻辑抽象出来，减少代码重复。

// withLogging.js
import React from 'react';

const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component has mounted.');
    }

    render() {
      return ;
    }
  };
};

export default withLogging;

// 使用withLogging高阶组件
import React from 'react';
import withLogging from './withLogging';

const Button = ({ text }) => {
  return {text};
};

const ButtonWithLogging = withLogging(Button);

const App = () => {
  return ;
};

export default App;

3. 使用Render Props模式：Render Props是一种将组件之间的代码共享抽象出来的技术，通过将一个函数作为组件的props传递，使得该函数可以在组件内部执行。这样可以将重复的代码逻辑提取到一个函数中，然后在需要的地方通过props传递给组件。

// ShowText.js
import React from 'react';

const ShowText = ({ text }) => {
  return 
{text}
;
};

export default ShowText;

// 使用Render Props
import React from 'react';
import ShowText from './ShowText';

const TextContainer = ({ render }) => {
  const text = 'Hello World';

  return 
{render(text)}
;
};

const App = () => {
  return (
     {
        return ;
      }}
    />
  );
};

export default App;

通过以上三种方式，可以有效地避免代码重复，提高代码的可维护性和复用性。