React.renderComponent -> React.render

This covers most everything. The perf suite still needs work for the
Element updates. And the server rendering example needs to be done
wholesale.
This commit is contained in:
Paul O’Shannessy 2014-10-22 18:30:11 -07:00
parent a90b4c9b3e
commit f53854bd93
31 changed files with 50 additions and 50 deletions

View File

@ -19,7 +19,7 @@ var HelloMessage = React.createClass({
}
});
React.renderComponent(
React.render(
<HelloMessage name="John" />,
document.getElementById('container')
);

View File

@ -5,10 +5,10 @@ var HelloMessage = React.createClass({\n\
}\n\
});\n\
\n\
React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
React.render(<HelloMessage name=\"John\" />, mountNode);\
";
React.renderComponent(
React.render(
<ReactPlayground codeText={HELLO_COMPONENT} />,
document.getElementById('helloExample')
);

View File

@ -28,10 +28,10 @@ var MarkdownEditor = React.createClass({\n\
}\n\
});\n\
\n\
React.renderComponent(<MarkdownEditor />, mountNode);\
React.render(<MarkdownEditor />, mountNode);\
";
React.renderComponent(
React.render(
<ReactPlayground codeText={MARKDOWN_COMPONENT} />,
document.getElementById('markdownExample')
);

View File

@ -19,10 +19,10 @@ var Timer = React.createClass({\n\
}\n\
});\n\
\n\
React.renderComponent(<Timer />, mountNode);\
React.render(<Timer />, mountNode);\
";
React.renderComponent(
React.render(
<ReactPlayground codeText={TIMER_COMPONENT} />,
document.getElementById('timerExample')
);

View File

@ -33,10 +33,10 @@ var TodoApp = React.createClass({\n\
);\n\
}\n\
});\n\
React.renderComponent(<TodoApp />, mountNode);\
React.render(<TodoApp />, mountNode);\
";
React.renderComponent(
React.render(
<ReactPlayground codeText={TODO_COMPONENT} />,
document.getElementById('todoExample')
);

View File

@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\
}
});
React.renderComponent(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
React.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
}());

View File

@ -5,7 +5,7 @@ var HelloMessage = React.createClass({\n\
}\n\
});\n\
\n\
React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
React.render(<HelloMessage name=\"John\" />, mountNode);\
";
function transformer(harmony, code) {
@ -39,7 +39,7 @@ var CompilerPlayground = React.createClass({
);
},
});
React.renderComponent(
React.render(
<CompilerPlayground />,
document.getElementById('jsxCompiler')
);

View File

@ -190,7 +190,7 @@ var ReactPlayground = React.createClass({
try {
var compiledCode = this.compileCode();
if (this.props.renderCode) {
React.renderComponent(
React.render(
<CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
mountNode
);
@ -199,7 +199,7 @@ var ReactPlayground = React.createClass({
}
} catch (err) {
this.setTimeout(function() {
React.renderComponent(
React.render(
<div className="playgroundError">{err.toString()}</div>,
mountNode
);

View File

@ -38,7 +38,7 @@ var BallmerPeakCalculator = React.createClass({
}
});
React.renderComponent(
React.render(
<BallmerPeakCalculator />,
document.getElementById('container')
);

View File

@ -18,7 +18,7 @@ var ExampleApplication = React.createClass({
var start = new Date().getTime();
setInterval(function() {
React.renderComponent(
React.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);

View File

@ -15,7 +15,7 @@ var ExampleApplication = React.createClass({
var start = new Date().getTime();
setInterval(function() {
React.renderComponent(
React.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);

View File

@ -41,7 +41,7 @@
});
var start = new Date().getTime();
setInterval(() => {
React.renderComponent(
React.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);

View File

@ -15,7 +15,7 @@ var ExampleApplication = React.createClass({
var start = new Date().getTime();
setInterval(function() {
React.renderComponent(
React.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);

View File

@ -44,7 +44,7 @@
});
var start = new Date().getTime();
setInterval(function() {
React.renderComponent(
React.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);

View File

@ -39,12 +39,12 @@
}
});
// Call React.createFactory instead of directly call ExampleApplication({...}) in React.renderComponent
// Call React.createFactory instead of directly call ExampleApplication({...}) in React.render
var ExampleApplicationFactory = React.createFactory(ExampleApplication);
var start = new Date().getTime();
setInterval(function() {
React.renderComponent(
React.render(
ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
document.getElementById('container')
);

View File

@ -125,4 +125,4 @@ var Example = React.createClass({
}
});
React.renderComponent(<Example />, document.getElementById('jqueryexample'));
React.render(<Example />, document.getElementById('jqueryexample'));

View File

@ -175,4 +175,4 @@ var PagePopUpContent = React.createClass({
});
// Render application.
React.renderComponent(App(null), document.getElementById('content'));
React.render(App(null), document.getElementById('content'));

View File

@ -75,7 +75,7 @@
}
});
React.renderComponent(
React.render(
<AnimateDemo />,
document.getElementById('container')
);

View File

@ -42,7 +42,7 @@ var reactVersions = [
window.onload = function(){
window.isDone = false;
React.renderComponent(
React.render(
BrowserPerfRunnerApp({
headless: perfRunner.getQueryParamArrayOrDefault('headless', [false])[0],
react: perfRunner.getQueryParamArrayOrDefault('react', reactVersions),

View File

@ -7,38 +7,38 @@ var BenchmarkQueue = React.createClass({
onCompleteEach: React.PropTypes.func,
onError: React.PropTypes.func
},
getDefaultProps: function(){
return {
maxTime: 5
};
},
getInitialState: function(){
return {
queue: this.props.initialQueue.slice()
};
},
setItemState: function(state){
state.test = this.state.queue[0].test;
state.react = this.state.queue[0].react;
this.props.onChange(state);
},
handleContextReady: function(window){
var benchmark = window.Benchmark(window.exports);
benchmark.options.maxTime = this.props.maxTime; //DEBUG
var itemState = {
testRunnerURL: window.location.href,
name: window.exports.name,
platform: window.Benchmark.platform.description,
reactVersion: window.React.version,
isMinified: (function(){
var code = window.React.renderComponent.toString();
var code = window.React.render.toString();
return code.indexOf(',') - code.indexOf('(') <= 2;
}())
};
@ -66,11 +66,11 @@ var BenchmarkQueue = React.createClass({
});
benchmark.run({async:true});
},
shouldComponentUpdate: function(nextProps, nextState){
return nextState.queue.length < this.state.queue.length;
},
render: function(){
if (!(this.state.queue && this.state.queue.length > 0)){
return React.DOM.div({style:{display:'none'}});
@ -110,11 +110,11 @@ var BrowserPerfRunnerContext = React.createClass({
// _handleFrameError: function(error){
// console.error('BrowserPerfRunnerContext', error);
// },
//
//
// _handleFrameLoad: function(event){
// console.log('BrowserPerfRunnerContext', event);
// },
//
//
_handleMessage: function(event){
if (location.href.indexOf(event.origin) !== 0)
return console.debug('BrowserPerfRunnerContext#_handleMessage ignored message from ' + event.origin);
@ -191,5 +191,5 @@ var BrowserPerfRunnerContext = React.createClass({
right: '100%',
bottom: '100%'
}
});

View File

@ -10,7 +10,7 @@
<script>
function main(){
var app = todolist.App({ fakeDataCount:333 });
React.renderComponent(app, document.body);
React.render(app, document.body);
}
window.onload = main;
</script>

View File

@ -15,7 +15,7 @@ exports.setup = function(){
/*global*/_rootNode = document.createElement('div');
document.body.appendChild(_rootNode);
var _firstChild = React.DOM.div(null, 'lol, perf testing ', this.count);
React.renderComponent(_firstChild, _rootNode);
React.render(_firstChild, _rootNode);
};
exports.fn = function(){
if (React.unmountAndReleaseReactRootNode) React.unmountAndReleaseReactRootNode(_rootNode);

View File

@ -70,7 +70,7 @@ exports.fn = function(){
}));
};
React.renderComponent(List({
React.render(List({
array: [11, 12, 13, 14, 15, 16, 17, 18, 19, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
bool: false,
number: Math.random(),

View File

@ -9,14 +9,14 @@ if (typeof exports == 'undefined') exports = {};
/*http://benchmarkjs.com/docs#options*/
exports.name = 'React.renderComponent single div';
exports.name = 'React.render single div';
exports.setup = function(){
/*global*/_rootNode = document.createElement('div');
document.body.appendChild(_rootNode);
};
exports.fn = function(){
React.renderComponent(React.DOM.div(null, 'lol, perf testing ', this.count), _rootNode);
React.render(React.DOM.div(null, 'lol, perf testing ', this.count), _rootNode);
};
exports.teardown = function(){
if (React.unmountAndReleaseReactRootNode) React.unmountAndReleaseReactRootNode(_rootNode);

View File

@ -21,7 +21,7 @@ exports.setup = function(){
}
});
React.renderComponent(AwesomeComponent(null), _rootNode);
React.render(AwesomeComponent(null), _rootNode);
};
exports.fn = function(deferred){
setState({random: Date.now() + Math.random()}, function(){

View File

@ -21,7 +21,7 @@ exports.setup = function(){
}
});
React.renderComponent(AwesomeComponent(null), _rootNode);
React.render(AwesomeComponent(null), _rootNode);
};
exports.fn = function(deferred){
setState({random: Date.now() + Math.random()}, function(){

View File

@ -18,7 +18,7 @@ exports.setup = function(){
document.body.appendChild(_rootNode);
};
exports.fn = function(){
React.renderComponent(AwesomeComponent(null), _rootNode);
React.render(AwesomeComponent(null), _rootNode);
};
exports.teardown = function(){
React.unmountComponentAtNode(_rootNode);

View File

@ -10,7 +10,7 @@ exports.setup = function(){
/*global*/_rootNode = document.createElement('div');
document.body.appendChild(_rootNode);
var appDescriptor = todolist.App({ fakeDataCount: 333 });
/*global*/_app = React.renderComponent(appDescriptor, _rootNode);
/*global*/_app = React.render(appDescriptor, _rootNode);
};
exports.fn = function(deferred){
var liCount = document.getElementsByTagName('li').length;

View File

@ -12,7 +12,7 @@ exports.setup = function(){
/*global*/_rootNode = document.createElement('div');
document.body.appendChild(_rootNode);
var appDescriptor = todolist.App({ fakeDataCount: 333 });
/*global*/_app = React.renderComponent(appDescriptor, _rootNode);
/*global*/_app = React.render(appDescriptor, _rootNode);
};
exports.fn = function(deferred){

View File

@ -10,7 +10,7 @@ exports.setup = function(){
/*global*/_rootNode = document.createElement('div');
document.body.appendChild(_rootNode);
var appDescriptor = todolist.App({ fakeDataCount: 333 });
/*global*/_app = React.renderComponent(appDescriptor, _rootNode);
/*global*/_app = React.render(appDescriptor, _rootNode);
/*global*/_todo1 = _app.addItem("Howdy 1!");
/*global*/_todo2 = _app.addItem("Howdy 2!");
/*global*/_todo3 = _app.addItem("Howdy 3!");

View File

@ -13,7 +13,7 @@ exports.setup = function(){
};
exports.fn = function(deferred){
React.renderComponent(todolist.App({ fakeDataCount: 333 }), _rootNode, function(){ deferred.resolve(); });
React.render(todolist.App({ fakeDataCount: 333 }), _rootNode, function(){ deferred.resolve(); });
};
exports.teardown = function(){