React学习笔记

graph TB
JavaScript-->JavaScript_runtime
JavaScript_runtime-->Node.js
JavaScript-->v8
v8(Google Chrome V8 引擎)-->Node.js
Node.js-->webpack(npm package 管理器)
webpack(webpack 打包器)-->npm
JSX-->babel(babel编译器)
npm-->create-react-app(create-react-app官方脚手架)
create-react-app-->React(React framework)
React_component(React 组件化三大基本要素)
babel-->React_component(React)
render-->React_component
React_component-->React
React-->vdom(虚拟DOM)
React-->diff(DIFF算法)

out_data(外部数据)-->this.props
this.props-->render(render方法)
bindin(内部数据)-->this.state
this.state-->render

add-dom(步骤 1 添加一个 DOM 容器到 HTML)-->script-tag(步骤 2 添加 Script 标签)
script-tag-->create_react(步骤 3创建一个 React 组件)

面向数据编程

语法

… 展开运算符

组件

父组件通过属性向子组件传递参数
子组件通过this.props接收父组件传递过来的参数值
子组件如想和父组件通信,需要调用父组件传递过来的方法

class HelloMessage extends Reacts.Component{
    render(){
        return(
        	<div>
            	hello, {this.props.name}
            </div>
        );
    }
}