少妇白洁如何使用React 001?
写了一个非常简单的实验性Pattern,暂且称为PurifiedComponent。目的是为了解决React Component在重用的时候,state持久和方法重用的问题。 React组件和state的生命周期不一致,即使是在一个对话框内,也可能因为折叠或者平移,一些组件消失但是他们的state还需要持久;这种情况下在 React官方的说法是应该把state写到相关组件的共同祖先上去,这一点在实现逻辑上本身没有问题,有问题的地方是重用很不方便;很多view state,例如和输入框配合的校验函数或者出错信息,他们本身就应该是和组件一起使用的,离开组件去单独维护没有意义; 解决这个问题的思路是,把组件需要的view state独立构建对象;持久化state的责任,托管到父组件去,但是对组件操作的责任,仍然留在子组件内,换句话说,子组件和它的state是由父组件bind在一起的。 class PurifiedComponent extends React.PureComponent { setState(props) { let { state,name,setState } = this.props setState({ [name] : Object.assign(new state.constructor(),state,props) }) } } class Impure extends React.Component { constructor(props) { super() this.state = { state: new props.component.State() } } render() { let Component = this.props.component return <Component state={this.state.state} setState={this.setState.bind(this)} name="state" /> } } 上面的两个class是基础类;PurifiedComponent在React.PureComponent基础上实现了一个 使用方式看下面的例子, 继承自 PurifiedComponent不在类结构内维护state,即不使用 第二个约定是,这些类需要有三个props:
有了这三者后,子组件就可以做stateful的工作,用传入的state和setState工作;name原则来说不是逻辑需要的,但可以结合PureComponent避免不必要的刷新。 class Child1 extends PurifiedComponent { static State = class State { constructor() { this.label = '' } } render() { let {state,name} = this.props console.log(`render ${name}`) return ( <div> <button style={{width: 64,height: 24}} onClick={() => this.setState({ label: state.label + 'a' })} >{state.label}</button> </div> ) } } Composite是一个组合,目前没有设计使用数组组合的方式,只看看用Property Name来组合的办法,这个Composite和它的子组件一样没有使用自己的 Composite的构造函数里有一个 class Composite extends PurifiedComponent { static State = class State { constructor() { this.child1 = new Child1.State() this.child2 = new Child1.State() } } constructor() { super() this.ssb = this.setState.bind(this) } render() { return ( <div> <Child1 state={this.props.state.child1} setState={this.ssb} name="child1" /> <Child1 state={this.props.state.child2} setState={this.ssb} name="child2" /> </div> ) } } class App extends Component { render() { return <Impure component={Composite} /> } } export default App 最后的 上述代码虽然简单但是可以工作,我会在生产环境中尝试一下。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |