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

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 @H_502_277@() {
        return {isLike: false};
    },//逗号
 
    //点击事件回调
    handlerClick: function @H_502_277@() {
        //改变状态
        this.setState({isLike: !this.state.isLike});
 
    },render: function @H_502_277@() {
        //获取状态
        /* 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 @H_502_277@() {
        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 @H_502_277@() {
        return {};
    },//内容改变后回调
    handlerChange: function @H_502_277@() {
 
        alert("变了");
    },render: function @H_502_277@() {
        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 @H_502_277@() {
        return {};
    },//内容改变后回调
    handlerChange: function @H_502_277@(e) {
        //e 是Event事件对象 targent 是指事件的目标对象
        alert(e.target.value);
    },document.getElementById("myDiv"));
 
//props 而子组件只能通过 props 来传递数据。 案例　03 event
//
var TextComponent = React.createClass({
    render: function @H_502_277@() {
        return <div>Hello {this.props.text}!</div>;
    }
 
});
 
var WrapperCompoent = React.createClass({
 
    //state 初始化
    getInitialState: function @H_502_277@() {
        return {text: ''};
    },//内容改变后回调
    handlerChange: function @H_502_277@(e) {
        //e 是Event事件对象 targent 是指事件的目标对象
        // alert(e.target.value);
        //改变状态
        this.setState({text: e.target.value});
    },render: function @H_502_277@() {
        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@H_502_277@(){ console.log("getDefaultProps"); return {name:'null'}; },//作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state getInitialState : function@H_502_277@(){ console.log("getInitialState"); return {count:0}; },//在完成首次渲染之前调用 componentWillMount : function@H_502_277@(){ 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@H_502_277@(){ console.log("componentDidMount"); },//组件接收到新的props时调用，并将其作为参数nextProps使用 componentWillReceiveProps : function@H_502_277@(nextProps){ console.log("componentWillReceiveProps"); },//组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。 shouldComponentUpdate : function@H_502_277@(){ console.log("shouldComponentUpdate"); return true; },//接收到新的props或者state后，进行渲染之前调用 componentWillUpdate : function @H_502_277@() { console.log("componentWillUpdate"); },//完成渲染新的props或者state后调用，此时可以访问到新的DOM元素 componentDidUpdate : function @H_502_277@() { console.log("componentWillUpdate"); },//组件被移除之前被调用，可以用于做一些清理工作 componentWillUnmount : function @H_502_277@() { console.log("componentWillUnmount"); } }); ReactDOM.render(<MyComponent/>,document.getElementById("myDiv"));

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

猜你在找的React相关文章