Compare text

Find the difference between two text files

Real-time editor

Hide unchanged lines

Disable line wrap

Layout

Diff precision

Syntax highlighting

Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

vscode插件i18n-automatically扫描前后jsx的对比图

Created 2 years agoDiff never expires

24 removals

Lines
Total
Removed

Characters
Total
Removed

To continue using this feature, upgrade to Diffchecker Pro View Pricing

194 lines

84 additions

Lines
Total
Added

Characters
Total
Added

To continue using this feature, upgrade to Diffchecker Pro View Pricing

237 lines

// test.jsx

import i18n from '@/i18n'; // test.jsx

import React, { useState, useEffect, useCallback, useMemo } from 'react';

import PropTypes from 'prop-types';

// 模拟的 API 调用函数

const fetchUserData = () => {

return new Promise((resolve) => {

setTimeout(() => {

resolve({

name: '张三',

name: i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-1'),

age: 30,

occupation: '软件工程师',

occupation: i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-2'),

});

}, 1000);

});

};

// 错误边界组件

class ErrorBoundary extends React.Component {

constructor(props) {

super(props);

this.state = { hasError: false, error: null };

}

static getDerivedStateFromError(error) {

return { hasError: true, error };

}

componentDidCatch(error, errorInfo) {

console.error('错误边界捕获到错误:', error, errorInfo);

}

render() {

if (this.state.hasError) {

return <h2>很抱歉，出现了错误：{this.state.error.message}</h2>;

return (

<h2>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-3')}

{this.state.error.message}

</h2>

);

}

return this.props.children;

}

// 头部组件

const Header = ({ title }) => (

<h1>{title}</h1>

<nav>

<ul>

<li>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-4')}

</a>

</li>

<li>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-5')}

</a>

</li>

<li>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-6')}

</a>

</li>

</ul>

</nav>

</header>

);

Header.propTypes = {

title: PropTypes.string.isRequired,

};

// 用户信息组件

const UserInfo = ({ user }) => (

<h3>{user.name}的个人信息</h3>

<h3>

{user.name}

<p>职业：{user.occupation}</p>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-7')}

</h3>

<p>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-8')}

{user.age}

</p>

<p>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-9')}

{user.occupation}

</p>

</div>

);

// 计数器组件

const Counter = () => {

const [count, setCount] = useState(0);

const increment = () => setCount((prevCount) => prevCount + 1);

const decrement = () => setCount((prevCount) => prevCount - 1);

return (

<div>

<h3>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-10')}</h3>

<p>当前计数：{count}</p>

<p>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-11')}

{count}

</p>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-12')}

</button>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-13')}

</button>

</div>

);

};

// 待办事项组件

const TodoList = () => {

const [todos, setTodos] = useState([]);

const [inputValue, setInputValue] = useState('');

const handleInputChange = (e) => setInputValue(e.target.value);

const handleSubmit = (e) => {

e.preventDefault();

if (inputValue.trim()) {

setTodos([

...todos,

{ id: Date.now(), text: inputValue, completed: false },

]);

setInputValue('');

}

};

const toggleTodo = (id) => {

setTodos(

todos.map((todo) =>

todo.id === id ? { ...todo, completed: !todo.completed } : todo,

);

};

return (

<div>

<h3>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-14')}</h3>

<input

type="text"

value={inputValue}

onChange={handleInputChange}

placeholder="输入新的待办事项"

placeholder={i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-15')}

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-16')}

</button>

</form>

<ul>

{todos.map((todo) => (

<li

key={todo.id}

onClick={() => toggleTodo(todo.id)}

style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}

{todo.text}

</li>

))}

</ul>

</div>

);

};

// 主应用组件

const App = () => {

const [user, setUser] = useState(null);

const [isLoading, setIsLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

fetchUserData()

.then((data) => {

setUser(data);

setIsLoading(false);

})

.catch((err) => {

setError('获取用户数据时出错');

setError(i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-17'));

setIsLoading(false);

console.error('获取用户数据失败:', err);

});

}, []);

const welcomeMessage = useMemo(() => {

return user ? `欢迎回来，${user.name}！` : '欢迎来到我们的应用！';

return user

? `${i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-18')}${user.name}！`

: i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-19');

}, [user]);

const handleError = useCallback(() => {

throw new Error('这是一个故意抛出的错误');

}, []);

if (isLoading) return <div>加载中，请稍候...</div>;

if (isLoading)

if (error) return <div>错误：{error}</div>;

return <div>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-20')}</div>;

if (error)

return (

<div>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-21')}

{error}

</div>

);

return (

<Header

title={i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-22')}

<main>

<h2>{welcomeMessage}</h2>

{user && <UserInfo user={user} />}

<button onClick={handleError}>点击触发错误</button>

{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-23')}

</button>

</main>

<p>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-24')}</p>

</footer>

</div>

</ErrorBoundary>

);

};

export default App;

Saved diffs

Original text

Open file

// test.jsx
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';

// 模拟的 API 调用函数
const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: '张三',
        age: 30,
        occupation: '软件工程师',
      });
    }, 1000);
  });
};

// 错误边界组件
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

componentDidCatch(error, errorInfo) {
    console.error('错误边界捕获到错误:', error, errorInfo);
  }

render() {
    if (this.state.hasError) {
      return <h2>很抱歉，出现了错误：{this.state.error.message}</h2>;
    }
    return this.props.children;
  }
}

// 头部组件
const Header = ({ title }) => (
  <header>
    <h1>{title}</h1>
    <nav>
      <ul>
        <li>
          <a href="#home">首页</a>
        </li>
        <li>
          <a href="#about">关于我们</a>
        </li>
        <li>
          <a href="#contact">联系方式</a>
        </li>
      </ul>
    </nav>
  </header>
);

Header.propTypes = {
  title: PropTypes.string.isRequired,
};

// 用户信息组件
const UserInfo = ({ user }) => (
  <div className="user-info">
    <h3>{user.name}的个人信息</h3>
    <p>年龄：{user.age}</p>
    <p>职业：{user.occupation}</p>
  </div>
);

// 计数器组件
const Counter = () => {
  const [count, setCount] = useState(0);

const increment = () => setCount((prevCount) => prevCount + 1);
  const decrement = () => setCount((prevCount) => prevCount - 1);

return (
    <div>
      <h3>计数器</h3>
      <p>当前计数：{count}</p>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
    </div>
  );
};

// 待办事项组件
const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

const handleInputChange = (e) => setInputValue(e.target.value);

const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      ),
    );
  };

return (
    <div>
      <h3>待办事项</h3>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          placeholder="输入新的待办事项"
        />
        <button type="submit">添加</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            onClick={() => toggleTodo(todo.id)}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

// 主应用组件
const App = () => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    fetchUserData()
      .then((data) => {
        setUser(data);
        setIsLoading(false);
      })
      .catch((err) => {
        setError('获取用户数据时出错');
        setIsLoading(false);
        console.error('获取用户数据失败:', err);
      });
  }, []);

const welcomeMessage = useMemo(() => {
    return user ? `欢迎回来，${user.name}！` : '欢迎来到我们的应用！';
  }, [user]);

const handleError = useCallback(() => {
    throw new Error('这是一个故意抛出的错误');
  }, []);

if (isLoading) return <div>加载中，请稍候...</div>;
  if (error) return <div>错误：{error}</div>;

return (
    <ErrorBoundary>
      <div className="app">
        <Header title="我的 React 应用" />
        <main>
          <h2>{welcomeMessage}</h2>
          {user && <UserInfo user={user} />}
          <Counter />
          <TodoList />
          <button onClick={handleError}>点击触发错误</button>
        </main>
        <footer>
          <p>© 2024 我的 React 应用。保留所有权利。</p>
        </footer>
      </div>
    </ErrorBoundary>
  );
};

export default App;

Changed text

Open file

import i18n from '@/i18n'; // test.jsx
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';

// 模拟的 API 调用函数
const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-1'),
        age: 30,
        occupation: i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-2'),
      });
    }, 1000);
  });
};

// 错误边界组件
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

componentDidCatch(error, errorInfo) {
    console.error('错误边界捕获到错误:', error, errorInfo);
  }

render() {
    if (this.state.hasError) {
      return (
        <h2>
          {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-3')}
          {this.state.error.message}
        </h2>
      );
    }
    return this.props.children;
  }
}

// 头部组件
const Header = ({ title }) => (
  <header>
    <h1>{title}</h1>
    <nav>
      <ul>
        <li>
          <a href="#home">
            {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-4')}
          </a>
        </li>
        <li>
          <a href="#about">
            {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-5')}
          </a>
        </li>
        <li>
          <a href="#contact">
            {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-6')}
          </a>
        </li>
      </ul>
    </nav>
  </header>
);

Header.propTypes = {
  title: PropTypes.string.isRequired,
};

// 用户信息组件
const UserInfo = ({ user }) => (
  <div className="user-info">
    <h3>
      {user.name}
      {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-7')}
    </h3>
    <p>
      {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-8')}
      {user.age}
    </p>
    <p>
      {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-9')}
      {user.occupation}
    </p>
  </div>
);

// 计数器组件
const Counter = () => {
  const [count, setCount] = useState(0);

const increment = () => setCount((prevCount) => prevCount + 1);
  const decrement = () => setCount((prevCount) => prevCount - 1);

return (
    <div>
      <h3>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-10')}</h3>
      <p>
        {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-11')}
        {count}
      </p>
      <button onClick={increment}>
        {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-12')}
      </button>
      <button onClick={decrement}>
        {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-13')}
      </button>
    </div>
  );
};

// 待办事项组件
const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

const handleInputChange = (e) => setInputValue(e.target.value);

const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      ),
    );
  };

return (
    <div>
      <h3>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-14')}</h3>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          placeholder={i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-15')}
        />

<button type="submit">
          {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-16')}
        </button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            onClick={() => toggleTodo(todo.id)}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

// 主应用组件
const App = () => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    fetchUserData()
      .then((data) => {
        setUser(data);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-17'));
        setIsLoading(false);
        console.error('获取用户数据失败:', err);
      });
  }, []);

const welcomeMessage = useMemo(() => {
    return user
      ? `${i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-18')}${user.name}！`
      : i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-19');
  }, [user]);

const handleError = useCallback(() => {
    throw new Error('这是一个故意抛出的错误');
  }, []);

if (isLoading)
    return <div>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-20')}</div>;
  if (error)
    return (
      <div>
        {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-21')}
        {error}
      </div>
    );

return (
    <ErrorBoundary>
      <div className="app">
        <Header
          title={i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-22')}
        />
        <main>
          <h2>{welcomeMessage}</h2>
          {user && <UserInfo user={user} />}
          <Counter />
          <TodoList />
          <button onClick={handleError}>
            {i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-23')}
          </button>
        </main>
        <footer>
          <p>{i18n.t('demoTest-test-jsx-befor-192991598bc5aa541-24')}</p>
        </footer>
      </div>
    </ErrorBoundary>
  );
};

export default App;