React笔记汇总（二）

来源：互联网发布：轻松装团购知乎编辑：程序博客网时间：2024/05/22 22:19

列表

错误的打开方法

<ul>    <Item/>    <Item/>    <Item/>    ...</ul>

正确的打开方法

<ul>    {arr}</ul>arr.push(<Item/>);arr.push(<Item/>);arr.push(<Item/>);...

例子

//子组件class Item extends React.Component {    constructor(...args){        super(...args);    }    render(){        return <li>{this.props.value}</li>    }}// 父组件class List extends React.Component {    constructor(...args){        super(...args);    }    render(){        var arr=[12,8,5,9];        var result=[];        for(var i=0; i<arr.length;i++){            result.push(<Item key={i} value={arr[i]}/>);        }        return <ul>            // 这里的result是变量，需要用{}括起来            {result}        </ul>    }}window.onload=function(){    var oDiv = document.getElementById('div1');    ReactDOM.render(        <List/>,        oDiv    );}

组件节点

除了利用state储存状态控制组件元素的样式，

还可以通过给组件元素添加ref的方式，在类的方法里通过this.ref获取元素，然后对其控制。

fn(){    var oS=this.refs['s1'];    oS.style.color='red';}render(){    return <div>        <input type="button" value="按钮" onClick={this.fn.bind(this)}/>        <span ref="s1">aaa</span>    </div>}

表单注意事项

使用value时，改成defaultValue；
checkbox的checked要改成defaultChecked

组件通信

this.props.children

    class NotesList extends React.Component{      render() {            return (              <ol>              {                React.Children.map(this.props.children, function (child) {                  return <li>{child}</li>;                })              }              </ol>            );        }    };    ReactDOM.render(      <NotesList>        <span>hello</span>        <span>world</span>      </NotesList>,      document.querySelector('#container')    );

this.props.children 的值有三种可能：

如果当前组件没有子节点   undefined           一个子节点   object           多个子节点   array

所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。

我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

父子通信

父组件定义的属性，子组件通过this.props.属性名来获取。

    class Son extends React.Component{        constructor(...args){            super(...args);        }        render(){            // 通过props获取            return <div>{this.props.a}</div>        }    }    class Father extends React.Component{        constructor(...args){            super(...args);            // 定义了一个a变量            this.a=12;        }        render(){            return <div>                <div>aaa</div>                <Son a={this.a}/>  // 在这里把变量a传进去子组件                <div>bbb</div>            </div>        }    }

子父通信

父组件定义一个回调函数，
子组件通过this.props.回调函数获取函数，然后传入参数。

class Son extends React.Component{    constructor(...args){        super(...args);        // 子集里有num=55        this.num=55;    }    render(){        // 通过props.cb传给回调函数        this.props.cb(this.num);        return <div>{this.props.a}</div>    }}class Father extends React.Component{    constructor(...args){        super(...args);        this.a=12;    }    // num被传送到这里    fn(num){        alert(num);    }    render(){        return <div>            <div>aaa</div>            <Son cb={this.fn.bind(this)}/>   // 把回调函数传入子组件            <div>bbb</div>        </div>    }}

组件生命周期

         componentWillMount()   创建前          componentDidMount()   刚创建完        componentWillUpdate()   更新前         componentDidUpdate()   刚更新       componentWillUnmount()   销毁之前  componentWillReceiveProps()   组件参数更新      shouldComponentUpdate()   主要用于性能优化

详细介绍

http://www.cnblogs.com/gdsblog/p/7348375.html

阅读全文

0 0