mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
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:
parent
a90b4c9b3e
commit
f53854bd93
|
|
@ -19,7 +19,7 @@ var HelloMessage = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
React.renderComponent(
|
||||
React.render(
|
||||
<HelloMessage name="John" />,
|
||||
document.getElementById('container')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\
|
|||
}
|
||||
});
|
||||
|
||||
React.renderComponent(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
|
||||
React.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ var BallmerPeakCalculator = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
React.renderComponent(
|
||||
React.render(
|
||||
<BallmerPeakCalculator />,
|
||||
document.getElementById('container')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
});
|
||||
var start = new Date().getTime();
|
||||
setInterval(() => {
|
||||
React.renderComponent(
|
||||
React.render(
|
||||
<ExampleApplication elapsed={new Date().getTime() - start} />,
|
||||
document.getElementById('container')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
});
|
||||
var start = new Date().getTime();
|
||||
setInterval(function() {
|
||||
React.renderComponent(
|
||||
React.render(
|
||||
<ExampleApplication elapsed={new Date().getTime() - start} />,
|
||||
document.getElementById('container')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
);
|
||||
|
|
|
|||
2
examples/jquery-bootstrap/js/app.js
vendored
2
examples/jquery-bootstrap/js/app.js
vendored
|
|
@ -125,4 +125,4 @@ var Example = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
React.renderComponent(<Example />, document.getElementById('jqueryexample'));
|
||||
React.render(<Example />, document.getElementById('jqueryexample'));
|
||||
|
|
|
|||
2
examples/jquery-mobile/js/app.js
vendored
2
examples/jquery-mobile/js/app.js
vendored
|
|
@ -175,4 +175,4 @@ var PagePopUpContent = React.createClass({
|
|||
});
|
||||
|
||||
// Render application.
|
||||
React.renderComponent(App(null), document.getElementById('content'));
|
||||
React.render(App(null), document.getElementById('content'));
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
React.renderComponent(
|
||||
React.render(
|
||||
<AnimateDemo />,
|
||||
document.getElementById('container')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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%'
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -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!");
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user