Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Remove <React.unstable_ConcurrentMode /> element type#15532

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Remove <ConcurrentMode />
Use createSyncRoot instead.
  • Loading branch information
@acdlite
acdlite committedMay 13, 2019
commite34a55f5d6e9617ab611cbd37c33f8a8d36b3328
14 changes: 5 additions & 9 deletionsfixtures/unstable-async/time-slicing/src/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import React, {PureComponent} from 'react';
import {flushSync,render} from 'react-dom';
import{unstable_scheduleCallback} from 'scheduler';
import {flushSync,unstable_createRoot} from 'react-dom';
importScheduler from 'scheduler';
import _ from 'lodash';
import Charts from './Charts';
import Clock from './Clock';
Expand DownExpand Up@@ -67,7 +67,7 @@ class App extends PureComponent {
}
this._ignoreClick = true;

unstable_scheduleCallback(() => {
Scheduler.unstable_next(() => {
this.setState({showDemo: true}, () => {
this._ignoreClick = false;
});
Expand DownExpand Up@@ -146,9 +146,5 @@ class App extends PureComponent {
}

const container = document.getElementById('root');
render(
<React.unstable_ConcurrentMode>
<App />
</React.unstable_ConcurrentMode>,
container
);
const root = ReactDOM.unstable_createRoot(container);
root.render(<App />, container);
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,6 @@ let ReactFeatureFlags = require('shared/ReactFeatureFlags');
let ReactDOM;
let Scheduler;

const ConcurrentMode = React.unstable_ConcurrentMode;

const setUntrackedInputValue = Object.getOwnPropertyDescriptor(
HTMLInputElement.prototype,
'value',
Expand DownExpand Up@@ -86,12 +84,9 @@ describe('ReactDOMFiberAsync', () => {
);
}
}
ReactDOM.render(
<ConcurrentMode>
<Counter />
</ConcurrentMode>,
container,
);
const root = ReactDOM.unstable_createRoot(container);
root.render(<Counter />);
Scheduler.flushAll();
expect(asyncValueRef.current.textContent).toBe('');
expect(syncValueRef.current.textContent).toBe('');

Expand All@@ -108,34 +103,7 @@ describe('ReactDOMFiberAsync', () => {
expect(syncValueRef.current.textContent).toBe('hello');
});

describe('with feature flag disabled', () => {
beforeEach(() => {
jest.resetModules();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactDOM = require('react-dom');
Scheduler = require('scheduler');
});

it('renders synchronously', () => {
ReactDOM.render(
<ConcurrentMode>
<div>Hi</div>
</ConcurrentMode>,
container,
);
expect(container.textContent).toEqual('Hi');

ReactDOM.render(
<ConcurrentMode>
<div>Bye</div>
</ConcurrentMode>,
container,
);
expect(container.textContent).toEqual('Bye');
});
});

describe('with feature flag enabled', () => {
describe('concurrent mode', () => {
beforeEach(() => {
jest.resetModules();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
Expand All@@ -144,7 +112,7 @@ describe('ReactDOMFiberAsync', () => {
Scheduler = require('scheduler');
});

it('createRoot makes the entire tree async', () => {
it('top-level updates are concurrent', () => {
const root = ReactDOM.unstable_createRoot(container);
root.render(<div>Hi</div>);
expect(container.textContent).toEqual('');
Expand All@@ -157,7 +125,7 @@ describe('ReactDOMFiberAsync', () => {
expect(container.textContent).toEqual('Bye');
});

it('updatesinside an async treeareasync by default', () => {
it('deepupdates(setState)areoncurrent', () => {
let instance;
class Component extends React.Component {
state = {step: 0};
Expand All@@ -179,56 +147,6 @@ describe('ReactDOMFiberAsync', () => {
expect(container.textContent).toEqual('1');
});

it('ConcurrentMode creates an async subtree', () => {
let instance;
class Component extends React.Component {
state = {step: 0};
render() {
instance = this;
return <div>{this.state.step}</div>;
}
}

ReactDOM.render(
<ConcurrentMode>
<Component />
</ConcurrentMode>,
container,
);
Scheduler.flushAll();

instance.setState({step: 1});
expect(container.textContent).toEqual('0');
Scheduler.flushAll();
expect(container.textContent).toEqual('1');
});

it('updates inside an async subtree are async by default', () => {
let instance;
class Child extends React.Component {
state = {step: 0};
render() {
instance = this;
return <div>{this.state.step}</div>;
}
}

ReactDOM.render(
<div>
<ConcurrentMode>
<Child />
</ConcurrentMode>
</div>,
container,
);
Scheduler.flushAll();

instance.setState({step: 1});
expect(container.textContent).toEqual('0');
Scheduler.flushAll();
expect(container.textContent).toEqual('1');
});

it('flushSync batches sync updates and flushes them at the end of the batch', () => {
let ops = [];
let instance;
Expand DownExpand Up@@ -345,12 +263,8 @@ describe('ReactDOMFiberAsync', () => {
}
}

ReactDOM.render(
<ConcurrentMode>
<Component />
</ConcurrentMode>,
container,
);
const root = ReactDOM.unstable_createRoot(container);
root.render(<Component />);
Scheduler.flushAll();

// Updates are async by default
Expand DownExpand Up@@ -390,12 +304,9 @@ describe('ReactDOMFiberAsync', () => {
return this.state.counter;
}
}
ReactDOM.render(
<ConcurrentMode>
<Counter />
</ConcurrentMode>,
container,
);
const root = ReactDOM.unstable_createRoot(container);
root.render(<Counter />);
Scheduler.flushAll();
expect(container.textContent).toEqual('0');

// Test that a normal update is async
Expand Down
8 changes: 2 additions & 6 deletionspackages/react-dom/src/__tests__/ReactDOMHooks-test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -141,7 +141,7 @@ describe('ReactDOMHooks', () => {
expect(labelRef.current.innerHTML).toBe('abc');
});

it('should not bail out when an update is scheduled from within an event handler inConcurrentMode', () => {
it('should not bail out when an update is scheduled from within an event handler inConcurrent Mode', () => {
const {createRef, useCallback, useState} = React;

const Example = ({inputRef, labelRef}) => {
Expand All@@ -162,11 +162,7 @@ describe('ReactDOMHooks', () => {
const labelRef = createRef();

const root = ReactDOM.unstable_createRoot(container);
root.render(
<React.unstable_ConcurrentMode>
<Example inputRef={inputRef} labelRef={labelRef} />
</React.unstable_ConcurrentMode>,
);
root.render(<Example inputRef={inputRef} labelRef={labelRef} />);

Scheduler.flushAll();

Expand Down
16 changes: 5 additions & 11 deletionspackages/react-dom/src/__tests__/ReactDOMRoot-test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,6 @@ let React = require('react');
let ReactDOM = require('react-dom');
let ReactDOMServer = require('react-dom/server');
let Scheduler = require('scheduler');
let ConcurrentMode = React.unstable_ConcurrentMode;

describe('ReactDOMRoot', () => {
let container;
Expand All@@ -25,7 +24,6 @@ describe('ReactDOMRoot', () => {
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
Scheduler = require('scheduler');
ConcurrentMode = React.unstable_ConcurrentMode;
});

it('renders children', () => {
Expand All@@ -47,7 +45,7 @@ describe('ReactDOMRoot', () => {

it('`root.render` returns a thenable work object', () => {
const root = ReactDOM.unstable_createRoot(container);
const work = root.render(<ConcurrentMode>Hi</ConcurrentMode>);
const work = root.render('Hi');
let ops = [];
work.then(() => {
ops.push('inside callback: ' + container.textContent);
Expand All@@ -65,7 +63,7 @@ describe('ReactDOMRoot', () => {

it('resolves `work.then` callback synchronously if the work already committed', () => {
const root = ReactDOM.unstable_createRoot(container);
const work = root.render(<ConcurrentMode>Hi</ConcurrentMode>);
const work = root.render('Hi');
Scheduler.flushAll();
let ops = [];
work.then(() => {
Expand DownExpand Up@@ -157,11 +155,7 @@ describe('ReactDOMRoot', () => {

const root = ReactDOM.unstable_createRoot(container);
const batch = root.createBatch();
batch.render(
<ConcurrentMode>
<App />
</ConcurrentMode>,
);
batch.render(<App />);

Scheduler.flushAll();

Expand DownExpand Up@@ -208,7 +202,7 @@ describe('ReactDOMRoot', () => {
it('can wait for a batch to finish', () => {
const root = ReactDOM.unstable_createRoot(container);
const batch = root.createBatch();
batch.render(<ConcurrentMode>Foo</ConcurrentMode>);
batch.render('Foo');

Scheduler.flushAll();

Expand DownExpand Up@@ -248,7 +242,7 @@ describe('ReactDOMRoot', () => {

it('can commit an empty batch', () => {
const root = ReactDOM.unstable_createRoot(container);
root.render(<ConcurrentMode>1</ConcurrentMode>);
root.render(1);

Scheduler.advanceTime(2000);
// This batch has a later expiration time than the earlier update.
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -103,72 +103,4 @@ describe('ReactDOMServerIntegration', () => {
expect(await render(<React.StrictMode />)).toBe(null);
});
});

describe('React.unstable_ConcurrentMode', () => {
itRenders('an concurrent mode with one child', async render => {
let e = await render(
<React.unstable_ConcurrentMode>
<div>text1</div>
</React.unstable_ConcurrentMode>,
);
let parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
});

itRenders('an concurrent mode with several children', async render => {
let Header = props => {
return <p>header</p>;
};
let Footer = props => {
return (
<React.unstable_ConcurrentMode>
<h2>footer</h2>
<h3>about</h3>
</React.unstable_ConcurrentMode>
);
};
let e = await render(
<React.unstable_ConcurrentMode>
<div>text1</div>
<span>text2</span>
<Header />
<Footer />
</React.unstable_ConcurrentMode>,
);
let parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
expect(parent.childNodes[1].tagName).toBe('SPAN');
expect(parent.childNodes[2].tagName).toBe('P');
expect(parent.childNodes[3].tagName).toBe('H2');
expect(parent.childNodes[4].tagName).toBe('H3');
});

itRenders('a nested concurrent mode', async render => {
let e = await render(
<React.unstable_ConcurrentMode>
<React.unstable_ConcurrentMode>
<div>text1</div>
</React.unstable_ConcurrentMode>
<span>text2</span>
<React.unstable_ConcurrentMode>
<React.unstable_ConcurrentMode>
<React.unstable_ConcurrentMode>
{null}
<p />
</React.unstable_ConcurrentMode>
{false}
</React.unstable_ConcurrentMode>
</React.unstable_ConcurrentMode>
</React.unstable_ConcurrentMode>,
);
let parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
expect(parent.childNodes[1].tagName).toBe('SPAN');
expect(parent.childNodes[2].tagName).toBe('P');
});

itRenders('an empty concurrent mode', async render => {
expect(await render(<React.unstable_ConcurrentMode />)).toBe(null);
});
});
});
Loading
[8]ページ先頭
©2009-2025 Movatter.jp