学习RN之前看这一篇React入门就够了

000

React是一个用于构建用户界面的 JavaScript 库，起源于Facebook内部项目，13年已经开源https://github.com/facebook/react。学习ReactNative首先要了解React相关的知识（当然可以和RN同步学习），今天只是一个入门介绍但用于开发ReactNative已经足够了。

一、React优势

虚拟DOM,HTML写在JS里
一切皆组件，支持自定义
单向数据流，数据改变自动同步视图
Write once, run everywhere

二、HelloWorld

废话不多说，先来个HelloWorld。

浏览器中打开查看效果，看到Hello World，恭喜你已经入门了。

三、JSX

JSX语法简单说就是HTML写在JS里。想详细了解的可以查看官方文档https://reactjs.org/docs/introducing-jsx.html

四、组件Component

创建组件一共有3中方式，建议选择第一和第三种。

组件中只能有一个根节点
组件首字母必须大写，否则会被解析成html标签
组件类对应的标签的用法和HTML标签的用法完全一致，可以加入任意的属性
具有可组合、可重用、可维护的特征

无状态函数式组件

无状态函数式组件形式上表现为一个只带有一个render方法的组件类，通过函数形式或者箭头函数，并且该组件是无state状态的。

var HelloA = (props) => {
    return {props.name}
}

React.createClass

React.createClass是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件。

var HelloMessage = React.createClass({
    render: function() {
        return (Hello);
    }
});

class

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式。

class HelloM extends React.Component{
    render(){
        return Hello {this.props.name};
    }
};

五、组件生命周期

先来个标准的ES6组件生命周期代码

class LifeComponent extends React.Component{
    constructor(props){
        super(props)
        console.log('构造函数')
        this.state={
            title:props.title
        }
    }
    componentWillMount(){
        console.log('componentWillMount');
    }
    componentDidMount(){
        console.log('componentDidMount');
    }
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        return true;
        }
    componentWillUpdate(){
        console.log('componentWillUpdate');
    }

    componentDidUpdate(){
        console.log('componentDidUpdate');
    }
    componnentWillReceiveProps(){
        console.log('componnentWillReceiveProps');
    }
    render(){
        console.log('render');
        return(
            
                {this.state.title}
            
        );
    } 
 }
LifeComponent.propTypes = {
    title:React.PropTypes.string,
}
LifeComponent.defaultProps = {
    title:'标题',
}
ReactDOM.render(
    ,
    document.getElementById('example')
);

组件的生命周期介绍图如下：

图片来自http://blog.guowenfh.com/2017/02/05/2017/es6-react-life-cycle/

注意：

componentWillMount() 、componentDidMount() 、componentWillReceiveProps() 这三个函数中允许调用setState,

shouldComponentUpdate、 componentWillUnmount 调用setStat无效

componentWillUpdate、componentDidUpdate 调用setStat会死循环

六、Props 、 State对比

相同

都是用于描述组件状态的
都可以改变,改变都会触发组建的重新渲染

不同

Props是由外部传入的，是父组件传递给子组件的数据流。
State是内部定义的，代表组件的内部状态。在内部改变与外部组件没有直接联系。
Props通常在组件外部发生变化，在内部保持不变。
一个组件不能改变自身的props, 但要负责设置子组件的 props。

七、箭头函数

ES6之前按钮点击我们可能是这样写的：

class LButton extends React.Component{
        render(){
          return ;
        }
        handleClick(){
            this.setState({fontSize:30,color:'white', backgroundColor:'red'});
        }
 };

需要在调用handleClick的地方绑定this。ES6之后使用箭头函数就不用了，请看实例：

class LLButton extends React.Component{
    render(){
      return ;
    }
};

或者

class LLLButton extends React.Component{
    render(){
      return ;
    }
    handleClick(){
        this.setState({fontSize:30,color:'white', backgroundColor:'yellow'});
    }
};

更多箭头函数介绍请访问：https://reactjs.org/docs/faq-functions.html#is-it-ok-to-use-arrow-functions-in-render-methods

八、获取真实的DOM节点

React提供了一个获取组件的的方式： Refs。

使用场景：

处理焦点、文本选择或媒体控制。
触发强制动画。
集成第三方 DOM 库

如果可以通过声明式实现，则尽量避免使用 refs。即能用State或者Props实现的不要用Refs。

来个例子直观了解一下Refs:

九、表单提交

下面看一个官网的表单提交的例子。输入框中的值变化时通过onChange保存到State中，点击提交时从State中取出提交。

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};       
    }
    render() {
        return (
             {
                alert('A name was submitted: ' + this.state.value);
                event.preventDefault();
            }}>
            
                Name:
                 {
                    this.setState({value: event.target.value});
                }}/>
            
            
            
        );
    }
}
ReactDOM.render(
    ,
    document.getElementById('example')
);

运行效果：

运行效果

十、何去何从

学习ReactNative掌握这些React知识基本可以开始搞了，如果你想更深入的学习React可以到React中文网站查看文档和教程https://doc.react-china.org/ 。

更多iOS、逆向、ReactNative开发文章请专注微信公众号：乐Coding