从零开始 React Native (4) React入门_状态属性_生命周期

来源：互联网发布：深圳市网络诈骗编辑：程序博客网时间：2024/06/06 02:02

React入门状态属性生命周期

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <script src="react.js"></script>    <script src="react-dom.js"></script>    <script src="browser.min.js"></script>    <script type="text/babel" src="04.js"></script>    <title>Title</title>    <div id="myDiv"></div></head><body></body></html>

//注意 这里的这三个文件去这里下载  //前两个[下载地址 ](http://reactjs.cn/react/docs/getting-started-zh-CN.html)//第三个babel的文件 直接保存文件就行//https://npmcdn.com/babel-core@5.8.38/browser.min.js//把这个js保存一下//三个文件就齐了 <script src="react.js"></script>    <script src="react-dom.js"></script>    <script src="browser.min.js"></script>

第一个js

/** * Created by liuml on 2017/4/25. *///React.js//React 组件化(组件的重用)  自定义一个组件//自定义组件class HelloReact extends React.Component {    //组件的内容    render() {        return <div>            Hello React!        </div>;    }}//自定义组件class HelloReact extends React.Component {    //组件的内容    render() {        return <div>            Hello<i> React!</i>        </div>;    }}//使用自定义的组件//绘制到页面中ReactDOM.render(<HelloReact></HelloReact>, document.body);//下一个例子  包含  组件的重用class ChildText extends React.Component {    //组件的内容    render() {        return <div>            Hello<b> React!</b>        </div>;    }}class WrapperText extends React.Component {    //组件的内容  虚拟dom(document object model)    //React自定义组件大写开头  html 标签小写开头    render() {        return <p>            <ChildText></ChildText>            <span>wrapperText</span>        </p>;    }}//  虚拟dom  跨平台ReactDOM.render(<WrapperText></WrapperText>, document.body);

第二个js 案例

/** * Created by liuml on 2017/4/25. *///案例: 点击切换 喜欢不喜欢//标签属性命名 , 小驼峰命名规则/*class Text extends React.Component { handlerClick() { alert("ok"); } render() { var like = "喜欢"; //通过状态改变text  onclick 小驼峰命名 return <p onClick={this.handlerClick}>你{like}吗?</p> } } ReactDOM.render(<Text/>,document.getElementById("myDiv"));*/var Text = React.createClass({    //设置状态的初始值    getInitialState: function () {        return {isLike: false};    },//逗号    //点击事件回调    handlerClick: function () {        //改变状态        this.setState({isLike: !this.state.isLike});    },    render: function () {        //获取状态        /*  var like ="喜欢";         if(this.isLike){         like ="不喜欢";         }else{         like ="喜欢";         }*/        var text = this.state.isLike ? "喜欢" : "不喜欢";        //通过状态改变text  onclick 小驼峰命名        return <p onClick={this.handlerClick}>你{text}吗?</p>    }});ReactDOM.render(<Text/>, document.getElementById("myDiv"));//加载流程：//1.getInitialState（初始化，设置组件的state的值，给了一个对象）//2.render（不喜欢）//点击之后的流程//1.handleClick（点击回调）//2.setState（改变状态）//3.render（喜欢）

第三个js

//props 例子  通过属性传参var Text = React.createClass({    render: function () {        return <p> I love {this.props.name}</p>    }});ReactDOM.render(<Text name="test"/>, document.getElementById("myDiv"));//props  更新子组件  而子组件只能通过 props 来传递数据。 案例　01 联动//子组件class TextComponent extends React.Component {    render() {        return <div>hello{this.props.text}!</div>    }}//父组件var WrapperCompoent = React.createClass({    getInitialState: function () {        return {};    },    //内容改变后回调    handlerChange: function () {        alert("变了");    }    ,    render: function () {        return <div>            <TextComponent/>            <input type="text" onChange={this.handlerChange}/>        </div>;    }})ReactDOM.render(<WrapperCompoent/>, document.getElementById("myDiv"));//子组件class TextComponent extends React.Component {    render() {        return <div>hello {this.props.text}!</div>    }}//props  子组件只能通过 props 来传递数据。 案例　02 event  联动//父组件var WrapperCompoent = React.createClass({    getInitialState: function () {        return {};    },    //内容改变后回调    handlerChange: function (e) {        //e 是Event事件对象 targent 是指事件的目标对象        alert(e.target.value);    }    ,    render: function () {        return <div>            <TextComponent/>            <input type="text" onChange={this.handlerChange}/>        </div>;    }})ReactDOM.render(<WrapperCompoent/>, document.getElementById("myDiv"));//props  而子组件只能通过 props 来传递数据。 案例　03 event//var TextComponent = React.createClass({    render: function () {        return <div>Hello {this.props.text}!</div>;    }});var WrapperCompoent = React.createClass({    //state 初始化    getInitialState: function () {        return {text: ''};    },    //内容改变后回调    handlerChange: function (e) {        //e 是Event事件对象 targent 是指事件的目标对象        // alert(e.target.value);        //改变状态        this.setState({text: e.target.value});    },    render: function () {        return <div>            <TextComponent text={this.state.text}/>            <input type="text" onChange={this.handlerChange}/>        </div>;    }})ReactDOM.render(<WrapperCompoent/>, document.getElementById("myDiv"));//传参流程//1.handleChange（父组件回调）//2.setState（修改父组件的状态）//3.render（父组件重新渲染，子组件也会渲染）//3.把父组件的状态值，作为子组件的属性值传入//4.render（子组件内容改变）

第四个js

//React 组件的生命周期var MyComponent = React.createClass({    //作用于组件类，只调用一次，返回对象用于设置默认的props    getDefaultProps : function(){        console.log("getDefaultProps");        return {name:'null'};    },    //作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state    getInitialState : function(){        console.log("getInitialState");        return {count:0};    },    //在完成首次渲染之前调用    componentWillMount : function(){        console.log("componentWillMount");    },    //必选的方法，创建虚拟DOM    // 只能通过this.props和this.state访问数据    // 可以返回null、false或任何React组件    // 只能出现一个顶级组件（不能返回数组）    // 不能改变组件的状态    // 不能修改DOM的输出    render :() => {console.log("render"); return <div>MyComponent</div>;},    //真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素    componentDidMount : function(){        console.log("componentDidMount");    },    //组件接收到新的props时调用，并将其作为参数nextProps使用    componentWillReceiveProps : function(nextProps){        console.log("componentWillReceiveProps");    },    //组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。    shouldComponentUpdate : function(){        console.log("shouldComponentUpdate");        return true;    },    //接收到新的props或者state后，进行渲染之前调用    componentWillUpdate : function () {        console.log("componentWillUpdate");    },    //完成渲染新的props或者state后调用，此时可以访问到新的DOM元素    componentDidUpdate : function () {        console.log("componentWillUpdate");    },    //组件被移除之前被调用，可以用于做一些清理工作    componentWillUnmount : function () {        console.log("componentWillUnmount");    }});ReactDOM.render(<MyComponent/>, document.getElementById("myDiv"));

0 0