ReactJS：親子部分更新

Question

私は、特定のユースケースで親コンポーネントと子コンポーネントの間で通信する方法について頭を悩ませています。

私は、外部ライブラリを使用していくつかの点をレンダリングする子コンポーネントを持っています。

私が現在やっていることは、componentDidMount/Updateを実装し、ポイントをthis.props.points（親コンポーネントによって提供される配列）にレンダリングするために外部ライブラリを使用することです。

ポイントのレンダリングには、それらをループして、ExternalLib.addPoint（point）のようなものを呼び出します。私がやりたい何

は、代わりに毎回すべての点をthis.props.points変更をループで、子コンポーネントに親コンポーネントが追加（または削除）個々の点を作っています。

親コンポーネントにthis.refs.myChild.addPoint（point）のようなものを呼び出すのは面白いですか？

これを実現する他の手法はありますか？

更新

はここにいくつかのコード（https://jsfiddle.net/69z2wepo/61366/）です。これが原因で、この例では簡略化されて

const ExternalLib = { 

    addPoint: function(el, point) { 
     var li = document.createElement("li"); 
     li.innerHTML = point; 
     el.appendChild(li); 
    } 
} 

class Child extends React.Component { 

    componentDidMount() { 
     this.renderPoints(); 
    } 

    componentDidUpdate() { 
     this.renderPoints(); 
    } 

    renderPoints() { 
     const el = this.refs.points; 
     el.innerHTML = ''; 
     this.props.points.forEach(function(point) { 
      ExternalLib.addPoint(el, point); 
     }); 
    } 

    render() { 
     console.log('render') 
     return (
      <div> 
       <ul ref="points"></ul> 
      </div> 
     ); 
    } 
} 

class Parent extends React.Component { 

    constructor() { 

     super(); 

     this.state = { 
      points: [] 
     }; 
    } 

    addPoint() { 

     const points = this.state.points.slice(); 

     points.push((new Date()).getTime()); 

     this.setState({ 
      points: points 
     }); 
    } 

    render() { 
     return (
      <div> 
       <button onClick={this.addPoint.bind(this)}>Add Point</button> 
       <Child points={this.state.points} /> 
      </div> 
     ); 
    } 
} 

ReactDOM.render(
    <Parent />, 
    document.getElementById('container') 
); 

私が直接マップとレバレッジを利用してマークアップを生成することがありましたのに反応部分DOM更新 - 外部のlibは、この質問の範囲にないいくつかの余分なものを行います。

ありがとうございます！

Answer 1

リアクションレンダリングプロセスを妨害したい場合は、shouldcomponentupdateと記述することができます。

shouldComponentUpdate(nextProps){ 
    //comparePoints() is a function able to find if a new point is present in the list, comparing existing used points with new one 
    var newPoint = comparePoints(this.props.points, nextProps.points) 

    if(newPoint){ 
    ExternalLib.addPoint(newPoint); 
    //forbide re-render 
    return false; 
    } 

    //enable other update 
    return true; 
}