初学react

Posted 2020-10-22 ylp0617

(0) React引入

<script type=‘text/javascript‘ src="react/react.js" charset="UTF-8"></script>
<script type=‘text/javascript‘ src="react/react-dom.js"></script>
<script type=‘text/javascript‘ src="react/JSXTransformer.js"></script>
<script type=‘text/javascript‘ src="react/ReactRouter.min.js"></script>
<script type="text/jsx">
    // 我是代码
</script>

(1) Hello world React

var message = "hello world React";

// 创建虚拟dom
var vdom = <div>
    {message}
</div>;

// 模板渲染
var reactApp = document.getElementById("reactApp");
ReactDOM.render(vdom,reactApp);

(2) ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 html 语言，并插入指定的 DOM 节点。

// 模板渲染
var reactApp = document.getElementById("reactApp");
RenderDoM.render(vdom,reactApp);

(3)JSX 语法

JSX 语法的好处 ： 1、允许我们使用熟悉的语法来定义HTML元素树
                2、程序结构更加语义化
                3、提供更加语义化且易懂的标签
                4、可以随时的掌控HTML标签
JSX 语法可以看成一种类HTML语法，其内可以HTML与JavaScript混写，对于“<”开头的，它会以html的规则进行解析，对于“{”开头的它会以JavaScript的规则进行解析；

(4)组件

React 允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类;

// 创建组件,（首字母必须大写）
var App = React.createClass({
    render : function(){
        var vd = <div></div>;
        return vd;
    }
})
// 引用 <App></App>

(5)getDefaultProps 为组件设置初始属性

getDefaultProps，每个组件只是调用一次
当然要个组件设置属性，也不是必须设置该方法
var MyTitle = React.createClass({
    getDefaultProps : function(){
        return {
            title : "",
            left : "",
            right : ""
        }
    },
    render : function(){
        return (
            // 此处必须用只能存在一个节点
            <div>
                <h1>{this.props.title}</h1>
                <h2>{this.props.left}</h2>
                <h3>{this.props.right}</h3>
            </div>
        );
    }
})

// <MyTitle left="left" title="title" right="right"></MyTitle>

(6)属性，样式，类

<style>
    .colorGreen{
        color:green;
    }
</style>
var MyImg = React.createClass({
    render : function(){
        var colorRed = {
            color:"red"
        }
        return (
            <div>
                <img src="img/1.png" style={{"width":"100%"}}>
                <p style={colorRed}>我是文本1</p>
                <p className="colorGreen">我是文本2</p>
                // jsx语法将html中的class变成了className
            </div>  
        )
    }
})

(7)事件

事件的使用有点像原生的js，唯一不同的是，react使用了驼峰命名的规则，对于原生的onclick，react则是onClick，事件的传参则是使用了bind函数;

var App = React.createClass({
    render : function(){
        return (
            <div>
                <button onClick={this.dealClick}>点击</button>
                <button onClick={this.setVal.bind(this,20)}>事件传参</button>
            </div>
        )
    },
    dealClick : function(){
        alert("1");
    },
    setVal : function(val){
        alert(val);
    }
})

(8)非DOM属性

1、key
2、ref
3、dangerouslySetInnerHTML

key : key是一个可选的唯一标识符,通过给组件设置一个独一无二的key，可以在渲染的时候智能的选择重新创建一个组件，还是重用一个组件从而提高渲染性能;
    var App = React.createClass({
        render : function(){
            var list = [10,20,30];
            var vd = <div>
                <div>
                    {
                        // 循环渲染用map
                        list.map(function(item,index){
                            return <li key={index}>{item}</li>
                        })
                    }
                </div>
            </div>;
            return vd;
        }
    })
ref ： ref允许父组件在render方法外保持对子组件的引用
    var MyComponent = React.createClass({
        render : function(){
            return (
                <div>
                    <input type="text" ref="inputText" />
                    <input type="button" value="点击" onClick={this.dealClick}/>
                </div>
            )
        },
        dealClick : function(){
            // 获取输入框的值
            console.log(this.refs.inputText.value);
        }
    })
dangerouslySetInnerHTML ： 设置原始的HTML
    var MyHTML = React.createClass({
        render : function(){
            var content = "<ul><li>A</li><li>B</li><li>C</li><li>D</li></ul>";
            var vd = <div>
                <h3>Hello</h3>
                <p>{content}</p>
                <p dangerouslySetInnerHTML={{__html:content}}></p>
            </div>;
            return vd;
        }
    })

(9)this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点
// -- > 当前组件没有子节点, this.props.children = undefined
// -- > 有一个子节点, this.props.children  = object
// -- > 有多个子节点, this.props.children = array 
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object;

var NotesList = React.createClass({
    render : function(){
        return (
            <ol>
                {
                    React.Children.map(this.props.children,function(item){
                        return (<li>{item}</li>);
                    })
                }
            </ol>
        )
    }
})
var App = React.createClass({
    render : function(){
        var vd = <div>
            <h3>Hello</h3>
            <NotesList>
                <span>Hello</span>
                <span>World</span>
            </NotesList>
        </div>;
        return vd;
    }
})

(10)this.state

React 不操作DOM，只更新数据，通过数据的更新来重新渲染
getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件;

var Cart = React.createClass({
    getInitialState : function(){
        // 设置初始状态
        return {
            isShow : false
        }
    },
    render : function(){
        return (
            <div>
                <button onClick={this.dealClick}>购物车</button>
                {this.state.isShow && 
                    <ul>
                        <li>伊利谷粒多</li>
                        <li>营养快线</li>
                        <li>可乐</li>
                    </ul>
                }
            </div>
        )
    },
    dealClick : function(){
        // 设置state 中的isShow
        this.setState({
            isShow : !this.state.isShow
        })
    }
})

(11)表单

下面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况;
var Input = React.createClass({
    getInitialState : function(){
        return {
            value : ""
        }
    },
    render : function(){
        var value = this.state.value;
        return (
            <div>
                <input value={value} type="text" onChange={this.dealChange} />
                <p>{value}</p>
            </div>
        )
    },
    dealChange : function(event){
        this.setState({
            value : event.target.value
        })
    }
})

(12)组件的生命周期（理论性的知识，建议看书理解）

组件的生命周期分成三个状态：
    1、实例化(会调用的方法)
        getDefaultProps
        getInitialState
        componentWillMount
        render
        componentDidMount
        后续运用：
            getInitialState
            componentWillMount
            render
            componentDidMount
    2、存在期
        componentWillReceiveProps
        shouldComponentUpdate
        componentWillUpdate
        render
        componentDidUpdate
    3、销毁 && 清理期
        componentWillUpdate

(13)Ajax

组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI;

var GetList = React.createClass({
    getInitialState : function(){
        return {
            list : []
        }
    },
    componentDidMount : function(){
        var url = "1.json";
        $.getJSON(url,{},function(res){
            this.setState({
                list : res.data
            });
        }.bind(this));
        // 此处的bind是为了解决闭包问题;
    },
    render : function(){
        var list = this.state.list;
        return (
            <div>
                {
                    this.state.list.map(function(item,index){
                        return (
                            <li>{item.name}</li>
                        )
                    })
                }
            </div>
        )
    }
})

(14)路由

1、导入路由组件，并引入其中的变量
//Router 路由管理
// Route 路由
// IndexRoute 主路由
// Link 链接
// IndexLink 主链接
var {Router,Route,IndexRoute,IndexLink,Link} = ReactRouter;

2 、创建用于切换的界面
var Wechat = React.createClass({
    render : function(){
        var vd = <div>
            WeChat
            <p><Link to="/chat/100">小花</Link></p>
            <p><Link to="/chat/200">小喵</Link></p>
        </div>;
        return vd;
    }
})
var Contact = React.createClass({
    render : function(){
        var vd = <div>
            Contact
        </div>;
        return vd;
    }
})
var DisCover = React.createClass({
    render : function(){
        var vd = <div>
            DisCover
        </div>;
        return vd;
    }
})
var MyInfo = React.createClass({
    render : function(){
        var vd = <div>
            MyInfo
        </div>;
        return vd;
    }
})
var Chat = React.createClass({
    render : function(){
        var vd = <div>
            Chat
            <p>id={this.props.params.id}</p>
            //获取通过路由传递的参数
        </div>;
        return vd;
    }
})
// 创建导航栏组件
var Navigation = React.createClass({
    getDefaultProps : function(){
        return {
            left:"",
            title:"",
            right:""
        }
    },
    render : function(){
        var navStyle = {
            width:"100%",
            height:"44px",
            backgroundColor:"#666",
            borderBottom:"1px solid #ccc",
            textAlign:"center",
            lineHeight:"44px",
            color:"#fff"
        }

        var leftStyle = {
            float:"left",
            width:"15%",
            height:"100%",
        }

        var titleStyle = {
            float:"left",
            width:"70%",
            height:"100%",
        }

        var rightStyle = {
            float:"left",
            width:"15%",
            height:"100%",
        }
        var vd = <div style={navStyle}>
            <div style={leftStyle}>{this.props.left}</div>
            <div style={titleStyle}>{this.props.title}</div>
            <div style={rightStyle}>{this.props.right}</div>
        </div>;
        return vd;
    }
})
// 创建底部导航组件
var Footer = React.createClass({
    render : function(){
        var navStyle = {
            position:"fixed",
            bottom:"0",
            left:"0",
            width:"100%",
            height:"58px",
            background:"#f1f1f1"
        }
        var navItemStyle = {
            display:"block",
            float:"left",
            width:"25%",
            height:"58px",
            lineHeight:"58px",
            textAlign:"center",
            color:"#666",
            textDecoration:"none"
        }
        var vd = <div style={navStyle}>
            <IndexLink activeStyle={{"color":"red"}} style={navItemStyle} to="/Wechat">Wechat</IndexLink>
            <IndexLink  style={navItemStyle}  to="/Contact">Contact</IndexLink>
            <IndexLink  style={navItemStyle}  to="/DisCover">DisCover</IndexLink>
            <IndexLink  style={navItemStyle}  to="/MyInfo">MyInfo</IndexLink>
        </div>;
        return vd
    }
})

// 创建组件 
var App = React.createClass({
    render : function(){
        var contentStyle = {
            minWidth:"320px",
            maxWidth:"640px",
            margin:"0 auto 48px",
            padding:"10px"
        }
        var vd = <div>
            <div>
                <Navigation left="" right="" title="weChat"></Navigation>
            </div>
            <div style={contentStyle}>
                {this.props.children}
            </div>
            <div>
                <Footer></Footer>
            </div>
        </div>;
        return vd;
    }
})

// 创建虚拟dom
var vdom = <Router>
    <Route path="/" component={App}>
        <IndexRoute component={Wechat} />
        <Route path="/Wechat" component={Wechat} />
        <Route path="/Contact" component={Contact} />
        <Route path="/DisCover" component={DisCover} />
        <Route path="/MyInfo" component={MyInfo} />
        <Route path="/Chat/:id" component={Chat} />
    </Route>
</Router>

//render
var reactApp = document.getElementById("reactApp");
ReactDOM.render(vdom,reactApp);