React-Three-Renderer 引用在 componentDidUpdate 中不是当前的(包括 MVCE)
React-Three-Renderer refs not current in componentDidUpdate (MVCE included)
我正在使用 react-three-renderer (npm, github) for building a scene with three.js.
我遇到了一个归结为 MVCE 的问题。参考没有按我期望的顺序更新。首先,这里是要查看的主要代码:
var React = require('react');
var React3 = require('react-three-renderer');
var THREE = require('three');
var ReactDOM = require('react-dom');
class Simple extends React.Component {
constructor(props, context) {
super(props, context);
// construct the position vector here, because if we use 'new' within render,
// React will think that things have changed when they have not.
this.cameraPosition = new THREE.Vector3(0, 0, 5);
this.state = {
shape: 'box'
};
this.toggleShape = this.toggleShape.bind(this);
}
toggleShape() {
if(this.state.shape === 'box') {
this.setState({ shape: 'circle' });
} else {
this.setState({ shape: 'box' });
}
}
renderShape() {
if(this.state.shape === 'box') {
return <mesh>
<boxGeometry
width={1}
height={1}
depth={1}
name='box'
ref={
(shape) => {
this.shape = shape;
console.log('box ref ' + shape);
}
}
/>
<meshBasicMaterial
color={0x00ff00}
/>
</mesh>;
} else {
return <mesh>
<circleGeometry
radius={2}
segments={50}
name='circle'
ref={
(shape) => {
this.shape = shape;
console.log('circle ref ' + shape);
}
}
/>
<meshBasicMaterial
color={0x0000ff}
/>
</mesh>
}
}
componentDidUpdate() {
console.log('componentDidUpdate: the active shape is ' + this.shape.name);
}
render() {
const width = window.innerWidth; // canvas width
const height = window.innerHeight; // canvas height
var position = new THREE.Vector3(0, 0, 10);
var scale = new THREE.Vector3(100,50,1);
var shape = this.renderShape();
return (<div>
<button onClick={this.toggleShape}>Toggle Shape</button>
<React3
mainCamera="camera"
width={width}
height={height}
onAnimate={this._onAnimate}>
<scene>
<perspectiveCamera
name="camera"
fov={75}
aspect={width / height}
near={0.1}
far={1000}
position={this.cameraPosition}/>
{shape}
</scene>
</React3>
</div>);
}
}
ReactDOM.render(<Simple/>, document.querySelector('.root-anchor'));
这会渲染一个带有绿色框的基本场景,这是 react-three-renderer 的 github 登陆页面上示例的一个分支。左上角的按钮将场景中的形状切换为蓝色圆圈,如果再次单击,则返回绿色框。我正在 ref 回调和 componentDidUpdate
中做一些记录。这是我遇到的问题的核心所在。第一次单击切换按钮后,我希望形状的 ref 指向圆圈。但正如您从日志中看到的那样,在 componentDidUpdate
中,ref 仍指向该框:
componentDidUpdate: the active shape is box
在那之后登录行显示 ref 回调被命中
box ref null [React calls null on the old ref to prevent memory leaks]
circle ref [object Object]
您可以放置断点来验证和检查。我预计这两件事会在我们进入 componentDidUpdate
之前发生,但如您所见,它是相反发生的。为什么是这样? react-three-renderer 是否存在潜在问题(如果是,你能诊断出来吗?),还是我误解了 React refs?
MVCE 在 this github repository 中可用。下载,运行npm install
,打开_dev/public/home.html.
提前致谢。
我查看了react-three-renderer中的源码。在 lib/React3.jsx 中,有一个两阶段渲染。
componentDidMount() {
this.react3Renderer = new React3Renderer();
this._render();
}
componentDidUpdate() {
this._render();
}
_render 方法似乎是加载子项的方法 - Three 中的网格对象。
_render() {
const canvas = this._canvas;
const propsToClone = { ...this.props };
delete propsToClone.canvasStyle;
this.react3Renderer.render(
<react3
{...propsToClone}
onRecreateCanvas={this._onRecreateCanvas}
>
{this.props.children}
</react3>, canvas);
}
render 方法绘制 canvas 并且不填充子项或调用 Three。
render() {
const {
canvasKey,
} = this.state;
return (<canvas
ref={this._canvasRef}
key={canvasKey}
width={this.props.width}
height={this.props.height}
style={{
...this.props.canvasStyle,
width: this.props.width,
height: this.props.height,
}}
/>);
}
总结一下,顺序是这样的:
- 应用程序组件渲染被调用。
- 这会渲染 react-three-renderer,它绘制了 canvas。
- 调用App组件的componentDidUpdate
- 调用react-three-renderer的componentDidUpdate
- 这会调用 _render 方法。
- _render 方法通过将 props.children(网格对象)传递给 Three 库来更新 canvas。
- 安装网格对象时,将调用相应的引用。
这解释了您在控制台语句中观察到的内容。
我正在使用 react-three-renderer (npm, github) for building a scene with three.js.
我遇到了一个归结为 MVCE 的问题。参考没有按我期望的顺序更新。首先,这里是要查看的主要代码:
var React = require('react');
var React3 = require('react-three-renderer');
var THREE = require('three');
var ReactDOM = require('react-dom');
class Simple extends React.Component {
constructor(props, context) {
super(props, context);
// construct the position vector here, because if we use 'new' within render,
// React will think that things have changed when they have not.
this.cameraPosition = new THREE.Vector3(0, 0, 5);
this.state = {
shape: 'box'
};
this.toggleShape = this.toggleShape.bind(this);
}
toggleShape() {
if(this.state.shape === 'box') {
this.setState({ shape: 'circle' });
} else {
this.setState({ shape: 'box' });
}
}
renderShape() {
if(this.state.shape === 'box') {
return <mesh>
<boxGeometry
width={1}
height={1}
depth={1}
name='box'
ref={
(shape) => {
this.shape = shape;
console.log('box ref ' + shape);
}
}
/>
<meshBasicMaterial
color={0x00ff00}
/>
</mesh>;
} else {
return <mesh>
<circleGeometry
radius={2}
segments={50}
name='circle'
ref={
(shape) => {
this.shape = shape;
console.log('circle ref ' + shape);
}
}
/>
<meshBasicMaterial
color={0x0000ff}
/>
</mesh>
}
}
componentDidUpdate() {
console.log('componentDidUpdate: the active shape is ' + this.shape.name);
}
render() {
const width = window.innerWidth; // canvas width
const height = window.innerHeight; // canvas height
var position = new THREE.Vector3(0, 0, 10);
var scale = new THREE.Vector3(100,50,1);
var shape = this.renderShape();
return (<div>
<button onClick={this.toggleShape}>Toggle Shape</button>
<React3
mainCamera="camera"
width={width}
height={height}
onAnimate={this._onAnimate}>
<scene>
<perspectiveCamera
name="camera"
fov={75}
aspect={width / height}
near={0.1}
far={1000}
position={this.cameraPosition}/>
{shape}
</scene>
</React3>
</div>);
}
}
ReactDOM.render(<Simple/>, document.querySelector('.root-anchor'));
这会渲染一个带有绿色框的基本场景,这是 react-three-renderer 的 github 登陆页面上示例的一个分支。左上角的按钮将场景中的形状切换为蓝色圆圈,如果再次单击,则返回绿色框。我正在 ref 回调和 componentDidUpdate
中做一些记录。这是我遇到的问题的核心所在。第一次单击切换按钮后,我希望形状的 ref 指向圆圈。但正如您从日志中看到的那样,在 componentDidUpdate
中,ref 仍指向该框:
componentDidUpdate: the active shape is box
在那之后登录行显示 ref 回调被命中
box ref null [React calls null on the old ref to prevent memory leaks]
circle ref [object Object]
您可以放置断点来验证和检查。我预计这两件事会在我们进入 componentDidUpdate
之前发生,但如您所见,它是相反发生的。为什么是这样? react-three-renderer 是否存在潜在问题(如果是,你能诊断出来吗?),还是我误解了 React refs?
MVCE 在 this github repository 中可用。下载,运行npm install
,打开_dev/public/home.html.
提前致谢。
我查看了react-three-renderer中的源码。在 lib/React3.jsx 中,有一个两阶段渲染。
componentDidMount() {
this.react3Renderer = new React3Renderer();
this._render();
}
componentDidUpdate() {
this._render();
}
_render 方法似乎是加载子项的方法 - Three 中的网格对象。
_render() {
const canvas = this._canvas;
const propsToClone = { ...this.props };
delete propsToClone.canvasStyle;
this.react3Renderer.render(
<react3
{...propsToClone}
onRecreateCanvas={this._onRecreateCanvas}
>
{this.props.children}
</react3>, canvas);
}
render 方法绘制 canvas 并且不填充子项或调用 Three。
render() {
const {
canvasKey,
} = this.state;
return (<canvas
ref={this._canvasRef}
key={canvasKey}
width={this.props.width}
height={this.props.height}
style={{
...this.props.canvasStyle,
width: this.props.width,
height: this.props.height,
}}
/>);
}
总结一下,顺序是这样的:
- 应用程序组件渲染被调用。
- 这会渲染 react-three-renderer,它绘制了 canvas。
- 调用App组件的componentDidUpdate
- 调用react-three-renderer的componentDidUpdate
- 这会调用 _render 方法。
- _render 方法通过将 props.children(网格对象)传递给 Three 库来更新 canvas。
- 安装网格对象时,将调用相应的引用。
这解释了您在控制台语句中观察到的内容。